backdrop-filter

Experimental

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
Berechneter Wertwie angegeben
Animationstypeine Filterfunktionsliste

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

BCD tables only load in the browser

Siehe auch