CSS backdrop-filter property

Definisjon og bruk

backdrop-filter Egenskapen brukes til å anvende grafiske effekter på området bak elementet.

Tips:For å se effekten, må elementet eller dens bakgrunn være minst delvis gjennomsiktig.

Eksempel

Legg til grafiske effekter bak elementet:

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

Prøv selv

CSS syntaks

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

Egenskapsverdi

Verdi Beskrivelse
ingen Standardverdi. Bruk ikke noen filtre på bakgrunnen.
filter

En liste over filtreffunksjoner adskilt med mellomrom, for eksempel:

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

eller peker til en SVG-filters URL.

initial Sett denne egenskapen til sin standardverdi. Se: initial.
inherit Arv denne egenskapen fra foreldrelementet. Se: inherit.

Tekniske detaljer

Standardverdi: ingen
Arv: Nei
Animasjonsproduksjon: Støttet. Se:Animasjonsrelaterte egenskaper.
Versjon: CSS3
JavaScript syntaks: object.style.backdropFilter="grayscale(100%)"

Nettleserstøtte

Tallene i tabellen indikerer den første version af nettleseren, der fullt ut støtter denne egenskap.

Tall med -webkit- præfiks indikerer den første version, der understøtter dette præfiks.

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

Relaterede sider

Tilfølgelig:CSS billeder

Kilde:CSS filter egenskab

Kilde:HTML DOM filter egenskab