CSS-backdrop-filter-Eigenschaft

Definition und Verwendung

backdrop-filter Diese Eigenschaft wird verwendet, um grafische Effekte auf den hinteren Bereich des Elements anzuwenden.

Tipp:Um die Wirkung zu sehen, muss das Element oder sein Hintergrund mindestens teilweise transparent sein.

Fügen Sie grafische Effekte für den hinteren Bereich des Elements hinzu:

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

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

Wert	Beschreibung
none	Standardwert. Keinen Filter auf den Hintergrund anwenden.
filter	Liste der Filterfunktionen durch Leerzeichen getrennt, z.B.: blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() sepia() saturate() oder zeigt auf die URL eines SVG-Filterns.
initial	Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe initial.
inherit	Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Standardwert:	none
Vererbbarkeit:	Nein
Animationserstellung:	Unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version:	CSS3
JavaScript-Syntax:	object.style.backdropFilter="grayscale(100%)"

Die Zahlen in der Tabelle stellen die erste Version dar, die die Eigenschaft vollständig unterstützt.

Zahlen mit dem Präfix -webkit- stellen die erste Version dar, die diesen Präfix unterstützt.

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