backdrop-filter

Springen zu:
  1. Übersicht
  2. Syntax
  3. Beispiele
  4. Spezifikationen
  5. Browser Kompatibilität
  6. Siehe auch

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.

Initialwertnone
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypeine Filterfunktionsliste
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()> | <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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende Unterstützung
Experimentell
Chrome Vollständige Unterstützung 47
Deaktiviert
Vollständige Unterstützung 47
Deaktiviert
Deaktiviert From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Vollständige Unterstützung 17Firefox Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 1178765.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 34
Deaktiviert
Vollständige Unterstützung 34
Deaktiviert
Deaktiviert From version 34: this feature is behind the Enable Experimental Web Platform Features preference.
Safari Vollständige Unterstützung 9
Mit Präfix
Vollständige Unterstützung 9
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Keine Unterstützung NeinChrome Android Vollständige Unterstützung 47
Deaktiviert
Vollständige Unterstützung 47
Deaktiviert
Deaktiviert From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 1178765.
Opera Android ? Safari iOS ? 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.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, Sebastianz
Zuletzt aktualisiert von: SJW,