<filter-function>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
Der <filter-function>
CSS Datentyp repräsentiert einen grafischen Effekt, der das Aussehen eines Eingabebildes verändern kann. Er wird in den Eigenschaften filter
und backdrop-filter
verwendet.
Syntax
Der <filter-function>
Datentyp wird mit einer der unten aufgeführten Filterfunktionen angegeben. Jede Funktion erfordert ein Argument, das, wenn es ungültig ist, dazu führt, dass kein Filter angewendet wird.
blur()
-
Verwischt das Bild.
brightness()
-
Macht das Bild heller oder dunkler.
contrast()
-
Erhöht oder verringert den Kontrast des Bildes.
drop-shadow()
-
Wendet einen Schlagschatten hinter dem Bild an.
grayscale()
-
Konvertiert das Bild in Graustufen.
hue-rotate()
-
Ändert die gesamte Farbton des Bildes.
invert()
-
Invertiert die Farben des Bildes.
opacity()
-
Macht das Bild transparent.
saturate()
-
Super-saturiert oder entsättigt das Eingabebild.
sepia()
-
Konvertiert das Bild in Sepia.
Formale Syntax
<filter-function> =
<blur()> |
<brightness()> |
<contrast()> |
<drop-shadow()> |
<grayscale()> |
<hue-rotate()> |
<invert()> |
<opacity()> |
<sepia()> |
<saturate()>
<blur()> =
blur( <length>? )
<brightness()> =
brightness( [ <number> | <percentage> ]? )
<contrast()> =
contrast( [ <number> | <percentage> ]? )
<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )
<grayscale()> =
grayscale( [ <number> | <percentage> ]? )
<hue-rotate()> =
hue-rotate( [ <angle> | <zero> ]? )
<invert()> =
invert( [ <number> | <percentage> ]? )
<opacity()> =
opacity( [ <number> | <percentage> ]? )
<sepia()> =
sepia( [ <number> | <percentage> ]? )
<saturate()> =
saturate( [ <number> | <percentage> ]? )
Beispiele
Vergleich von Filterfunktionen
Dieses Beispiel bietet eine Grafik, ein Auswahlmenü, um zwischen den verschiedenen Arten von Filterfunktionen zu wählen, und einen Schieberegler, um die in der Filterfunktion verwendeten Werte zu variieren. Durch das Aktualisieren der Steuerelemente wird der Filtereffekt in Echtzeit aktualisiert, so dass Sie die Effekte verschiedener Filter untersuchen können.
Das Dropdown-Menü wählt den Funktionsnamen aus und der Schieberegler setzt den Parameterwert für diese Funktion. Bei drop-shadow
wird der Wert sowohl für die horizontalen als auch vertikalen Versätze verwendet, und der Radius wird auf die Hälfte des Wertes gesetzt.
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # typedef-filter-function |
Browser-Kompatibilität
Siehe auch
- Eigenschaften, die diesen Datentyp verwenden:
filter
undbackdrop-filter