CSS backdrop-filter egenskap

Definition och användning

backdrop-filter Egenskapen används för att applicera grafiska effekter på området bakom elementet.

Tips:För att se effekten måste elementet eller dess bakgrund vara minst delvis transparent.

Exempel

Lägg till grafiska effekter bakom elementet:

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

Prova själv

CSS syntax

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

Egenskapsvärde

Värde Beskrivning
none Standardvärde. Använd inte några filter på bakgrunden.
filter

En lista med filterfunktioner separerade med mellanslag, t.ex.:

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

eller peka på en SVG-filters URL.

initial Sätt denna egenskap till dess standardvärde. Se vidare initial.
inherit Inherritar denna egenskap från föräldrelementet. Se vidare inherit.

Tekniska detaljer

Standardvärde: none
Arv: Nej
Animation tillverkning: Stöd. Se vidare:Animation relaterade egenskaper.
Version: CSS3
JavaScript syntax: object.style.backdropFilter="grayscale(100%)"

Webbläsarstöd

Numrerna i tabellen indikerar den första versionen av webbläsaren som helt stöder egenskapen.

Nummer med -webkit- prefix indikerar den första versionen som stöder detta prefix.

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

Relaterade sidor

Lär dig:CSS bilder

Referens:CSS filter egenskap

Referens:HTML DOM filter egenskap