<filter-function>

Der <filter-function> CSS Datentyp repräsentiert einen grafischen Effekt, der das Erscheinungsbild eines Eingabebildes verändern kann. Er wird in den Eigenschaften filter und backdrop-filter verwendet.

Syntax

Der <filter-function>-Datentyp wird durch eine der unten aufgelisteten Filterfunktionen angegeben. Jede Funktion erfordert ein Argument, das, wenn es ungültig ist, dazu führt, dass kein Filter angewendet wird.

blur()

Weichzeichnet das Bild.

brightness()

Hellt das Bild auf oder verdunkelt es.

contrast()

Erhöht oder verringert den Kontrast des Bildes.

drop-shadow()

Fügt einen Schatten hinter dem Bild hinzu.

grayscale()

Konvertiert das Bild in Graustufen.

hue-rotate()

Ändert den Gesamthue des Bildes.

invert()

Invertiert die Farben des Bildes.

opacity()

Macht das Bild transparent.

saturate()

Übersättigt 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 zeigt eine einfache Grafik zusammen mit einem Auswahlmenü, das es Ihnen ermöglicht, zwischen den verschiedenen Arten von Filterfunktionen zu wählen, und einem Schieberegler, mit dem Sie die Werte innerhalb der Filterfunktion variieren können. Wenn Sie die Steuerungen aktualisieren, wird der Filtereffekt in Echtzeit aktualisiert, was es Ihnen ermöglicht, die Effekte verschiedener Filter zu untersuchen.

css
div {
  width: 300px;
  height: 300px;
  background: url(firefox.png) no-repeat center;
  filter: <filter-function>(<value>);
}

Wo der <filter-function> der Filter ist, den Sie aus dem Drop-Down-Menü auswählen, und der <value> die Werte sind, die Sie mit dem Schieberegler einstellen: '

Spezifikationen

Specification
Filter Effects Module Level 1
# typedef-filter-function

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch