Ozadje-filter - CSS-triki

Anonim

backdrop-filterHotel v CSS se uporablja za uporabo filtra učinke ( grayscale, contrast, blur, itd) v ozadje / ozadje elementa. The backdrop-filterima enak učinek kot filterlastnost, le da se učinki filtra uporabljajo samo za ozadje in namesto za vsebino elementa.

Klasičen primer:

Filtrirana ozadja brez filtra za kulise

Pred tem backdrop-filterje bil edini način za dodajanje filtriranega ozadja dodajanje ločenega elementa »ozadje«, namestitev za elemente ospredja in filtriranje tako:

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

backdrop-filterLastnost vam omogoča, da odpravi to dodatno "ozadja" element in uporabite filtre za kuliso neposredno:

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

V času pisanja backdrop-filterje del osnutka urejevalnika modula 2 za učinke filtra in uradno ni del nobene specifikacije. Podpora za brskalnik je trenutno omejena (glejte »Podpora za brskalnik« spodaj).

Sintaksa

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

je lahko kar koli od naslednjega:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (za uporabo SVG filtrov)

Na kuliso lahko uporabite več s, na primer tako:

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

Za sprejemljive vrednosti za vsako od funkcij filtra glejte delovni osnutek modula W3C Filter Effects.

Primer

Za celovit pregled funkcij filtrov in imenitne načine njihove skupne uporabe glejte filtervnos v almanah v CSS-triki.

Naslednje pero je razčlenjeno iz primera v članku Robina Rendleja, ki raziskuje backdrop-filter.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
76 Ne Ne 17. 9 *

Mobilni / tablični računalnik

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

Sorodno

  • filter

Viri

  • Lastnost filtra ozadja Robin Rendle
  • Vnos MDN na ozadju-filter