Bakteppsfilter - CSS-triks

Anonim

Den backdrop-filteregenskap i CSS brukes for utøvelse av filtereffekter ( grayscale, contrast, blur, etc) til bakgrunnen / bakgrunn av et element. Den backdrop-filterhar samme effekt som filteregenskapen, bortsett fra at filtereffektene bare brukes på bakgrunnen og i stedet for på elementets innhold.

Klassisk eksempel:

Filtrerte bakgrunner uten bakgrunnsfilter

Før backdrop-filtervar den eneste måten å legge til en filtrert bakgrunn å legge til et eget "bakgrunnselement", plassere det bak forgrunnselementet og filtrere det slik:

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

Den backdrop-filteregenskapen kan du eliminere denne ekstra “bakgrunn” element og bruke filtre på bakgrunn direkte:

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

I skrivende stund backdrop-filterer den en del av Filter Effects Module 2 Editor's Draft og er ikke offisielt en del av noen spesifikasjon. Nettleserstøtte er for øyeblikket begrenset (se “Nettleserstøtte” nedenfor).

Syntaks

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

kan være noe av det følgende:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (for bruk av SVG-filtre)

Du kan bruke flere s på et bakteppe, slik:

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

Se W3C Filter Effects Module Working Draft for akseptable verdier for hver av filterfunksjonene.

Eksempel

For en omfattende titt på filterfunksjoner og smarte måter å bruke dem sammen, se filteralmanakkoppføringen på CSS-triks.

Følgende penn er gitt fra et eksempel i Robin Rendles artikkel om å utforske backdrop-filter.

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
76 Nei Nei 17 9 *

Mobil / nettbrett

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

I slekt

  • filter

Ressurser

  • Bakgrunnsfilteregenskapen av Robin Rendle
  • MDN-oppføring på bakgrunnsfilter