CSS backdrop-filter ominaisuus

Määrittely ja käyttö

backdrop-filter Ominaisuus soveltaa graafisia vaikutuksia elementin taustalle.

Vinkki:Nähdäksesi vaikutuksen, elementin tai sen taustan on oltava vähintään osittain läpinäkyvä.

Esimerkki

Lisää graafinen vaikutus elementin taustalle:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Kokeile itse

CSS-kieli

backdrop-filter: none|filter|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
none Oletusarvo. Ei sovelleta mitään suodatinta taustalle.
filter

Välilyönnillä erotettu suodattimofunktioiden luettelo, kuten:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

tai osoita SVG-suodattimen URL-osoitteeseen.

initial Aseta tämä ominaisuus sen oletusarvoon. Katso: initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: none
Perintä: Ei
Animaation tekeminen: Tuki. Katso:Animaatiot.
Versio: CSS3
JavaScript-kieli: object.style.backdropFilter="grayscale(100%)"

Selaimen tuki

Taulukossa olevat numerot viittaavat ensimmäiseen versioon, joka tukee ominaisuutta täysin.

Numeroita, jotka alkavat -webkit- etuliitteellä, viittaavat ensimmäiseen versioon, joka tukee etuliitettä.

Chrome Edge Firefox Safari Opera
76 79 103 9 -webkit- 63

Liittyvät sivut

Oppitunti:CSS kuva

Viittaus:CSS suodatin ominaisuus

Viittaus:HTML DOM filter ominaisuus