Baggrundsfilter - CSS-tricks

Anonim

Den backdrop-filterejendom i CSS bruges til at anvende filtereffekter ( grayscale, contrast, blur, etc.) til baggrund / kulisse af et element. Det backdrop-filterhar samme effekt som filteregenskaben, bortset fra at filtereffekterne kun anvendes på baggrunden og i stedet for elementets indhold.

Klassisk eksempel:

Filtrerede baggrunde uden baggrundsfilter

Før backdrop-filtervar den eneste måde at tilføje en filtreret baggrund på at tilføje et separat "baggrund" -element, placere det bag forgrundselementet (-erne) og filtrere det sådan:

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

Den backdrop-filteregenskab gør det muligt at fjerne denne ekstra ”baggrund” element og anvende filtre til direkte baggrund:

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

I skrivende stund backdrop-filterer den en del af Filter Effects Module 2 Editor's Draft og er ikke officielt en del af nogen specifikation. Browsersupport er i øjeblikket begrænset (se “Browsersupport” nedenfor).

Syntaks

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

kan være et af følgende:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (til anvendelse af SVG-filtre)

Du kan anvende flere s på en baggrund som sådan:

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

Se W3C filtereffektmodulets arbejdsudkast for acceptable værdier for hver af filterfunktionerne.

Eksempel

For et omfattende kig på filterfunktioner og smarte måder at bruge dem sammen på, se filteralmanakposten på CSS-tricks.

Den følgende pen er forked fra et eksempel i Robin Rendles artikel, der udforsker backdrop-filter.

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
76 Ingen Ingen 17 9 *

Mobil / tablet

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

Relaterede

  • filter

Ressourcer

  • Baggrundsfilteregenskaben af ​​Robin Rendle
  • MDN-post på baggrundsfilter