backdrop-filter

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

Übersicht

Die backdrop-filter CSS Eigenschaft beschreibt den Bereich hinter einem Element für Effekte wie Unschärfe oder Farbverschiebung, welcher anschließend durch das Element gesehen werden kann, indem die Transparenz/Deckkraft des Elements angepasst wird.

Initialwertnone
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
AnimierbarJa
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwert */
backdrop-filter: none;

/* URL zu SVG-Filter */
backdrop-filter: url(commonfilters.svg#filter);

/* Filterfunktionen */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Mehrere Filterfunktionen */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Globale Werte */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

Werte

TODO

Formale Syntax

none | <filter-function-list>

wobei
<filter-function-list> = [ <filter-function> | <url> ]+

wobei
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

Beispiele

backdrop-filter: blur(10px);

Spezifikationen

Spezifikation Status Kommentar
Filter Effects Module Level 2
Die Definition von 'backdrop-filter' in dieser Spezifikation.
Bearbeiterentwurf Ursprüngliche Definition

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung Nicht unterstützt[1] Nicht unterstützt[2] ? ? 9.0
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung Nicht unterstützt ? ? ? ?

[1]: Chrome Feature Request: Chromium bug #497522

[2]: Bug 1178765 – Implement backdrop-filter from Filter Effects Module Level 2

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz
 Zuletzt aktualisiert von: Sebastianz,