CSS - filter
Die filter Eigenschaft definiert visuelle Effekte (wie Unschärfe und Sättigung) zu einem Element (oft <img>).
Beispiel
img { filter: grayscale(100%); }
Definition und Verwendung
- Standard Wert:
- none
- CSS Version:
- CSS3
- Vererbt sich:
- Nein
- Animierbar:
- Ja
- -webkit-:
- -webkit-filter
Browser Unterstützung
Chrome Nein
Firefox Nein
Safari Nein
Opera Nein
Edge Nein
IE Nein
Mögliche Werte
Der Eigenschaft können die hier aufgelisteten Werte zugewiesen werden.
Wert | Beschreibung |
---|---|
blur(Pixel) | Wendet einen Unschärfe-Effekt auf das Bild an. Ein größerer Wert wird mehr Unschärfe erstellen. |
brightness(Prozent) | Stellt die Helligkeit des Bildes ein.
|
contrast(Prozent) | Stellt den Kontrast des Bildes ein.
|
drop-shadow(Pixel Pixel Pixel Pixel Farbe) | Gilt ein Schlagschatten-Effekt auf das Bild.
|
grayscale(Prozent) | Wandelt das Bild in Graustufen um.
Hinweis: Negative Werte sind nicht erlaubt. |
hue-rotate(deg) | Wendet einen Farbton Drehung auf das Bild an. Der Wert legt die Anzahl der Grad um den Farbkreis fest um die Bildfarben angepasst werden. 0deg ist Standard und ändert das Bild nicht .
Hinweis: Maximalwert ist 360 Grad. |
invert(Prozent) | Invertiert das Bild
Hinweis: Negative Werte sind nicht erlaubt. |
none | Standardwert. Kein Effekt. |
opacity(Prozent) | Stellt die Opazität Ebene für das Bild ein. Die Opazität-Ebene beschreibt die Transparenz des Bilds, wobei gilt:
Hinweis: Negative Werte sind nicht erlaubt. Tipp: Dieser Filter ist ähnlich wie die opacity Eigenschaft. |
saturate(Prozent) | Sättigt das Bild.
Hinweis: Negative Werte sind nicht erlaubt. |
sepia(Prozent) | Konvertiert das Bild in Sepia.
Hinweis: Negative Werte sind nicht erlaubt. |
url(SVG-URL Elemet-ID) | Die URL () Funktion gibt den Speicherort einer XML-Datei an, die ein SVG-Filter enthällt, außerdem kann einen Anker zu einem bestimmten Filterelement angegeben werden. |
initial | Setzt diese Eigenschaft auf den Standardwert. |
inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. |