Atrybut backdrop-filter CSS

Definicja i użycie

backdrop-filter Atrybut stosuje się do zastosowania graficznych efektów do obszaru za elementem.

Wskazówka:Aby zobaczyć efekt, element lub jego tło musi być przynajmniej częściowo przezroczyste.

Przykład

Dodaje graficzne efekty do obszaru za elementem:

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

Spróbuj sam!

CSS syntax

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

Wartość atrybutu

Wartość Opis
none Domyślna wartość. Nie stosuje się żadnych filtrów do tła.
filter

Lista funkcji filtrów oddzielonych spacjami, np.:

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

lub wskazuje URL filtru SVG.

initial Ustaw ten atrybut na jego wartość domyślną. Zobacz: initial.
inherit Przekazuje ten atrybut od jego elementu nadrzędnego. Zobacz: inherit.

Techniczne szczegóły

Domyślna wartość: none
Inheredność: Nie
Tworzenie animacji: Wsparcie. Zobacz:Atrybuty animacji.
Wersja: CSS3
JavaScript syntax: object.style.backdropFilter="grayscale(100%)"

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.

Liczby z przedrostkiem -webkit- oznaczają pierwszą wersję obsługującą ten przedrostek.

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

Strony związane

Tutorial:Obrazy CSS

Odnośnik:Atrybut filter w CSS

Odnośnik:HTML DOM filter atrybut