Använda ett Filter till en bakgrundsbild

0
54

Du kan använda ett filter till en hel del ganska enkelt med filter egendom. Men vad händer om du vill använda ett filter för att bara bakgrunden på ett element? Det är konstigt knepigt.

Det är CSS-egenskaper som är specifika för bakgrunder, som bakgrund-blandning-läge — utan att blanda och filter är inte samma sak. Sorta verkar vara anledningen till att vi har bakgrund-filter, men inte helt. Det betyder filtrering som bakgrund interagerar med vad som ligger bakom elementet.

Det finns ingen bakgrund-filter, tyvärr. Vad ska vi göra?

Använd en pseudo-element i stället för en bakgrund

Om du sätter innehållet i det element i en insida omslag, kan du ställa in detta på toppen av en pseudo-element som är helt enkelt att låtsas vara en bakgrund.

.modul {
position: relative;
}
.modul::innan {
innehåll: “”;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url(graphic-to-be-filtered.jpg);
filter: gråskala(100 procent).
}
.modul-inuti {
/* Detta kommer att göra det stack på toppen av ::före */
position: relative;
}

Se Pennan använd Filter till Pseudo-Element av Chris Coyier (@chriscoyier) på CodePen.

Se hur den “bakgrund” får filtreras med gråskala där? Vi kallade gråskala filtret där och tillämpas på den bara för att den pseudo-element, och lämnar resten av innehållet i ofiltrerade.

Det beror på vilken typ av filter du vill… du kanske kan fejka det med blandningslägen

Jag sprang in i denna fråga som jag var specifikt försöker gråskala bakgrunden bilden av ett element. Eftersom, som vi har täckt, det finns ingen specifik egendom bara för att, tänkte jag om bakgrunden-blandning-läge, i synnerhet hur det är att blanda alternativ för saker som färgmättnad och färg. Om jag kunde ställa en ren svart över toppen av den grafiska, då kunde jag blanda dem — som jag kan med flera bakgrunder — och i grunden falska en gråskala effekt.

Observera att du inte kan använda en färg av sig själv när du arbetar med flera olika bakgrunder (som skulle vara en background-color inte bakgrunden-bild), så har vi att fejka det också med en no-övergången linear-gradient.

.modul {
background-image:
linear-gradient(svart, svart),
url(image-to-be-fake-filters.jpg);
bakgrund-storlek: omslag,
bakgrund-blandning-läge: mättnad;
}

Se Pennan Tillämpa Falska Filter med Blend Mode av Chris Coyier (@chriscoyier) på CodePen.

Dan Wilson ‘ s utforskning

Dan fick vägen till detta och gjorde ett förberedande Pennan där det finns tre lager:

  1. Översta lagret: en vinjett från en radial gradient
  2. Mitt lager: fast färg
  3. Undre lager: grafisk bild

Du kan justera färger som används på de två översta lagren och tillämpa olika blandningslägen till var och en. Det var en annan sak jag lärt mig! Precis som du kan komma-separerad göra flera bakgrunder (och likaså med bakgrund-storlek, background-position och sådant för att tillämpa dessa värden till specifika bakgrund) du kan också komma-separat bakgrund-blandning-läge för att tillämpa olika blandning effekter till varje lager.

Se Pennan Flera Bakgrunder, Flera blandningslägen av Dan Wilson (@danwilson) på CodePen.