Bruke et Filter til et bakgrunnsbilde

0
38

Du kan bruke et filter til en hel element ganske enkelt med filter-egenskapen. Men hva hvis du vil bruke et filter, bare på bakgrunn av et element? Det er nifs vanskelig.

Det er CSS-egenskaper som er spesifikke for bakgrunn, som bakgrunn-blanding-modus — men blending og filtre er ikke det samme. Det sorta ser ut til å være grunnen til at vi har bakteppe-filter, men ikke helt. Som gjør filtrering som bakgrunn samhandler med hva som ligger bak element.

Det er ingen bakgrunn-filter, dessverre. Hva skal vi gjøre?

Bruk en pseudo-element i stedet for et bakgrunnen

Hvis du plasserte innholdet i elementet inne i en wrapper, kan du angi at på toppen av en pseudo-element som er bare utgir seg for å være en bakgrunn.

.modul {
position: relative;
}
.modul::før {
innhold: “”;
position: absolute;
øverst: 0; left: 0;
bredde: 100%; height: 100%;
background-image: url(graphic-to-be-filtered.jpg);
filter: gråtoner(100%);
}
.modul-inne {
/* Dette vil gjøre det stabel på toppen av ::før */
position: relative;
}

Se Penn Bruk Filter for å Psuedo Element av Chris Coyier (@chriscoyier) på CodePen.

Se hvordan “bakgrunn” blir filtrert med gråtoner det? Vi kalte gråtoner filter det og brukte det bare til pseudo-element, og etterlot resten av innholdet inne ufiltrert.

Det kommer an på hva slags filtrering du vil… du kan være i stand til å fake det med blanding modus

Jeg løp inn i dette problemet som jeg var spesielt prøver å gråtoner bakgrunnen bilde av et element. Siden, som vi har dekket, det er ingen spesifikk eiendel bare for det, tenkte jeg om bakgrunnen-blanding-modus, spesielt hvordan det er å blande valg for ting som metning og farge. Hvis jeg kunne sette ren svart over toppen av det grafiske, så jeg kunne blande dem — som jeg kan med flere bakgrunner — og i hovedsak falske et gråskala-effekt.

Merk at du ikke kan bruke en farge av seg selv når du arbeider med flere bakgrunner (det ville være en background-color ikke background-image), så vi har til å fake at så godt med en ikke-overgang linear-gradient.

.modul {
background-image:
linear-gradient(sort / sort),
url(image-to-be-fake-filters.jpg);
bakgrunn-size: dekk;
bakgrunn-blanding-modus: metning;
}

Se Penn Gjelder Falske Filter med Blanding Modus ved Chris Coyier (@chriscoyier) på CodePen.

Dan Wilson ‘ s explorations

Dan fikk måte inn i dette og laget en utforskende Penn, der det er tre lag:

  1. Øverste lag: en vignett fra en radial-gradient
  2. Midterste laget: solid farge
  3. Nederste lag: grafisk bilde

Du kan justere fargene som brukes på de to øverste lag og du vil bruke forskjellige blend modes til hver og en. Det var en annen ting jeg har lært! Akkurat som du kan komma-separat til å gjøre flere bakgrunner (og likeledes med bakgrunn størrelse, bakgrunn-posisjon og slikt for å bruke disse verdiene til bestemte bakgrunn), kan du også komma-egen bakgrunn-blanding-modus hvis du vil bruke forskjellige blander effekter til hvert lag.

Se Penn Flere Bakgrunner, Flere Blanding Moduser av Dan Wilson (@danwilson) på CodePen.