Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die 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.
Initialwert | none |
---|---|
Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen |
Vererbt | Nein |
Medien | visuell |
Berechneter Wert | wie angegeben |
Animationstyp | eine Filterfunktionsliste |
Kanonische Reihenfolge | die 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()> | <saturate()> | <sepia()>
wobei
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )wobei
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
backdrop-filter | Chrome
Vollständige Unterstützung
76
| Edge Vollständige Unterstützung 17 | Firefox
Vollständige Unterstützung
70
| IE Keine Unterstützung Nein | Opera
Vollständige Unterstützung
34
| Safari
Vollständige Unterstützung
9
| WebView Android Vollständige Unterstützung 76 | Chrome Android
Vollständige Unterstützung
76
| Firefox Android
Keine Unterstützung
Nein
| Opera Android ? | Safari iOS
Vollständige Unterstützung
9
| Samsung Internet Android Keine Unterstützung Nein |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
- Kompatibilität unbekannt
- Kompatibilität unbekannt
- Experimentell. Das Verhalten kann sich zukünftig ändern.
- Experimentell. Das Verhalten kann sich zukünftig ändern.
- Siehe Implementierungshinweise.
- Siehe Implementierungshinweise.
- Benutzer muss dieses Feature explizit aktivieren.
- Benutzer muss dieses Feature explizit aktivieren.
- Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
- Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.