Bakgrund-filter CSS-egenskapen

0
46

Jag hade aldrig hört talas om bakgrund-filter egendom tills igår, men efter ett par timmar för att leka med det jag är positivt att det är inget annat än magi. Detta beror på att det lägger till filter (som att ändra nyans, kontrast eller oskärpa) av bakgrunden till ett element utan att ändra text eller andra element inuti.

Ta detta exempel där jag har replikerade iOS anmälan stil: se hur bakgrunden av var och en av dessa rutor är suddig men texten är inte det?

Det är bara en enda rad av CSS för att skapa den bleka bakgrunden effekt, precis som denna:

.anmälan {
bakgrund-filter: blur(3px);
}

Nu är det värt att notera att webbläsaren stöd för denna CSS-egenskapen är inte särskilt bra stöd bara ännu (se nedan). Men vi har försökt att göra denna typ av filtrering grejer för en riktigt lång tid och så är det bra att se till att framsteg görs här. Chris skrev om “frostat glas” teknik 2014 och vägen tillbaka då man var tvungen att använda en massa konstiga hack och extra bilder för att replikera effekt. Nu kan vi skriva en hel del mindre kod för att få samma effekt!

Vi får också välja från en hel del fler filter än bara att frostat glas stil. Följande demo visar alla av bakgrund-filter värderingar och hur de ändra bakgrunden:

Var och en av dessa rutor är bara separata divs där jag har använt en annan bakgrund-filter till varje. Och det är det! Jag liksom kan inte tro hur enkelt det är, faktiskt.

Naturligtvis kan du kedja ihop dem så här:

.element {
bakgrund-filter: blur(5px) kontrast(.8);
}

Och detta skulle göra alla typer av genomarbetade och komplexa konstruktioner, speciellt om du börjar kombinera dem tillsammans med animationer.

Men vänta, varför behöver vi även denna fastighet? Tja, efter att ha läst upp lite verkar det som om det går till exempel standard är spärrat av vissa beskrivning. Det är vad Guillermo Esteves var att experimentera med tillbaka 2015:

Se Pennan PwRPZa av Guillermo Esteves (@gesteves) på CodePen.

Jag tror att vi kan göra något mycket konstigare och vackrare om vi lägger manken till.

En anteckning om webbläsaren stöd

Bakgrund-filter egendom är inte bra stöd vid tidpunkten för denna skrift. Och även i Safari där det är som stöds, måste du fortfarande att prefix. Det finns inget stöd för Firefox. Men, egentligen, gör webbplatser måste se exakt likadant ut i alla webbläsare?

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
Inga Inga Inga Inga 17 9*

Mobil / Surfplatta

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
9.0-9.2* Inga Inga Inga Inga Inga

Ytterligare läsning

  • bakgrund-filter på MDN
  • Byggnaden iOS-liknande genomskinlighet i CSS med bakgrund-filter