Taustan suodatin - CSS-temppuja

Anonim

backdrop-filterOmaisuus CSS käytetään soveltaa suodintehosteet ( grayscale, contrast, blur, jne) taustan / tausta elementin. Sillä backdrop-filteron sama vaikutus kuin filterominaisuudella, paitsi että suodatintehosteita käytetään vain taustalle ja elementin sisällön sijaan.

Klassinen esimerkki:

Suodatetut taustat ilman taustasuodatinta

Aikaisemmin backdrop-filterainoa tapa lisätä suodatettu tausta oli lisätä erillinen "tausta" -elementti, sijoittaa se etualan elementtien taakse ja suodattaa se näin:

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

backdrop-filterOminaisuuden avulla voit poistaa tämän ylimääräisen ”tausta” elementti ja käyttää suodattimia taustalla suoraan:

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

Kirjoitushetkellä se backdrop-filteron osa Filter Effects Module 2 Editorin luonnosta eikä virallisesti osa mitään määrityksiä. Selaintuki on tällä hetkellä rajoitettu (katso alla oleva selaintuki).

Syntaksi

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

voi olla jokin seuraavista:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (SVG-suodattimien käyttämiseen)

Voit käyttää taustalla useita s, kuten:

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

Katso hyväksyttävät arvot kullekin suodatintoiminnolle W3C-suodatinefektimoduulin työstöstä.

Esimerkki

Katso kattava kuvaus suodatintoiminnoista ja hienoista tavoista käyttää niitä yhdessä filterCSS-Tricks-almanakki-merkinnässä.

Seuraava kynä on haarautunut esimerkistä Robin Rendlen artikkelissa backdrop-filter.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
76 Ei Ei 17 9 *

Matkapuhelin / tabletti

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

Liittyvät

  • filter

Resurssit

  • Robin Rendlen taustansuodatinominaisuus
  • MDN-merkintä taustasuodattimessa