Bakgrundsfilter - CSS-tricks

Anonim

Den backdrop-filteregenskap i CSS används för att applicera filtereffekter ( grayscale, contrast, blur, etc) till bakgrund / bakgrund av ett element. Den backdrop-filterhar samma effekt som filteregenskapen, förutom att filtereffekterna endast tillämpas på bakgrunden och istället för på elementets innehåll.

Klassiskt exempel:

Filtrerade bakgrunder utan bakgrundsfilter

Tidigare backdrop-filtervar det enda sättet att lägga till en filtrerad bakgrund att lägga till ett separat ”bakgrundselement”, placera det bakom förgrundselementet och filtrera det så:

 
.background ( filter: blur(4px); position: absolute; width: 100%; height: 100%; )

Den backdrop-filteregenskapen kan du eliminera denna extra element ”bakgrund” och använda filter på bakgrunden direkt:

.foreground ( backdrop-filter: blur(10px); ) /* No .wrapper needed! */

I skrivande stund backdrop-filterär den en del av Editor Effect Module 2 Editor's Draft och ingår inte officiellt i någon specifikation. Webbläsarsupport är för närvarande begränsat (se “Webbläsarsupport” nedan).

Syntax

.element ( backdrop-filter: ()* | none )

kan vara något av följande:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (för tillämpning av SVG-filter)

Du kan använda flera s på en bakgrund, så här:

.element ( backdrop-filter: grayscale(0.5) opacity(0.8) /*… and on and on… */; )

Se W3C Filter Effects Module Working Draft för acceptabla värden för var och en av filterfunktionerna.

Exempel

För en omfattande titt på filterfunktioner och smidiga sätt att använda dem tillsammans, se filteralmanackposten på CSS-Tricks.

Följande penna är gjord av ett exempel i Robin Rendles artikelutforskning backdrop-filter.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
76 Nej Nej 17 9 *

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
88 Nej 81 9,0-9,2 *

Relaterad

  • filter

Resurser

  • Bakgrundsfilteregenskapen av Robin Rendle
  • MDN-post på bakgrundsfilter