Een Filter toepassen op een achtergrondafbeelding

0
12

U kunt een filter toepassen op een hele element vrij gemakkelijk met de eigenschap filter. Maar wat als u een filter toepassen op slechts naar de achtergrond van een element? Het is bizar lastig.

Er zijn CSS-eigenschappen die specifiek zijn voor achtergronden, zoals achtergrond-mix-mode — maar het mengen en filters zijn niet het zelfde ding. Het sorta lijkt te zijn de reden dat we hebben op de achtergrond-filter, maar niet helemaal. Dat doet filteren als de achtergrond van de wisselwerking met wat zich achter het element.

Er is geen achtergrond-filter, helaas. Wat moeten we doen?

Gebruik een pseudo-element in plaats van een achtergrond

Als u de inhoud van het element in een binnen-wrapper, kunt u instellen dat op de top van een pseudo-element dat is gewoon te doen alsof een achtergrond.

.module {
position: relative;
}
.module::before {
inhoud: “”;
position: absolute;
top: 0; left: 0;
breedte: 100%; height: 100%;
background-image: url(graphic-to-be-filtered.jpg);
filter: grijstinten(100%);
}
.module-binnen {
/* Dit maakt het stapelen op de top van de ::voor */
position: relative;
}

Zie de Pen Filter Toepassen op Psuedo Element van Chris Coyier (@chriscoyier) op CodePen.

Zie hoe de “achtergrond” wordt gefilterd met grijstinten er? We noemden de grijstinten filter er over en paste het alleen om de pseudo-element, waarbij de rest van de inhoud in ongefilterd.

Het hangt af van wat voor soort van filtering wilt u… u zou kunnen faken met overvloeimodi

Ik liep tegen dit probleem als ik was speciaal probeert te grijstinten de achtergrondafbeelding van een element. Omdat, zoals we hebben besproken, er is geen specifieke eigenschap alleen voor dat, ik dacht achtergrond-mix-modus, met name hoe er blending opties voor dingen zoals de verzadiging en de kleur. Als ik het kon rein zwart over de bovenkant van de afbeelding, dan kon ik mix ze — net als ik met meerdere achtergronden — en vooral de nep een grijswaarden-effect.

Opmerking u kunt geen gebruik maken van een effen kleur door zich als u werkt met verschillende achtergronden (dat zou een achtergrond-kleur achtergrond-afbeelding), dus we moeten wel nep dat ook met een no-overgang linear-gradient.

.module {
background-image:
linear-gradient(zwart, zwart),
url(image-to-be-fake-filters.jpg);
background-size: cover;
achtergrond-mix-modus: verzadiging;
}

Zie de Pen van Toepassing Nep-Filter met mengmodus van Chris Coyier (@chriscoyier) op CodePen.

Dan Wilson ‘ s verkenningen

Dan heb dit en maakte een verkennend Pen in drie lagen:

  1. Bovenste laag: een vignet van een radiaal verloop
  2. Midden-laag: effen kleur
  3. Onderste laag:het beeld grafisch

U kunt de kleuren die worden gebruikt op de bovenste twee lagen en toepassen van verschillende overvloeimodi. Dat was een ding heb ik geleerd! Net zoals u kunt een door komma ‘s gescheiden meerdere achtergronden (en ook met de achtergrond-grootte, achtergrond-positie en dergelijke toe te passen die waarden aan specifieke achtergronden) kunt u ook door komma’ s gescheiden achtergrond-mix-modus om verschillende mengen effecten per laag.

Zie de Pen Meerdere Achtergronden, Meerdere overvloeimodi van Dan Wilson (@danwilson) op CodePen.