tas2580
Blog über Webentwicklung

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.
  • 0% macht das Bild komplett schwarz
  • 100% ist Standard und ändert das Bild nicht
  • Werte über 100% hellen das Bild auf
contrast(Prozent) Stellt den Kontrast des Bildes ein.
  • 0% macht das Bild komplett schwarz
  • 100% ist Standard und ändert das Bild nicht
  • Werte über 100% geben dem Bild mehr Kontrast
drop-shadow(Pixel Pixel Pixel Pixel Farbe) Gilt ein Schlagschatten-Effekt auf das Bild.
  • Wert 1: Erforderlich. Gibt einen Pixelwert für den horizontalen Schatten. Negative Werte legen den Schatten auf der linken Seite des Bildes.
  • Wert 2: Erforderlich. Gibt einen Pixelwert für den vertikalen Schatten. Negative Werte legen den Schatten über das Bild.
  • Wert 3: Optional. Fügt einen Unschärfe-Effekt zu den Schatten hinzu. Ein größerer Wert wird mehr Unschärfe schaffen (der Schatten wird größer und leichter). Negative Werte sind nicht erlaubt. Wenn kein Wert angegeben wird, wird 0 verwendet (der Schatten der Kante ist scharf).
  • Wert 4: Optional. Positive Werte bewirken, dass der Schatten erweitert und größer wird, und negative Werte bewirken, dass der Schatten schrumpft. Wenn nicht angegeben, wird 0 verwendet (der Schatten hat die gleiche Größe wie das Element).
  • Wert 5: Optional. Gibt die Farbe des Schattens an. Wenn nicht anders angegeben, hängt die Farbe vom Browser ab (oft schwarz).
grayscale(Prozent) Wandelt das Bild in Graustufen um.
  • 0% ist Standard, das Bild wird nicht verändert
  • 100% wird das Bild komplett grau um Schwarzweißbilder zu machen

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
  • 0% ist Standard, das Bild wird nicht verändert
  • 100% das Bild wird vollständig invertiert

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:
  • 0% ist komplett transparent.
  • 100% ist Standard, das Bild wird nicht verändert(keine Transparenz).

Hinweis: Negative Werte sind nicht erlaubt.

Tipp: Dieser Filter ist ähnlich wie die opacity Eigenschaft.

saturate(Prozent) Sättigt das Bild.
  • 0% wird das Bild vollständig ungesättigt.
  • 100% ist Standard, das Bild wird nicht verändert
  • Werte über 100% erzeugen übersättigte Ergebnisse

Hinweis: Negative Werte sind nicht erlaubt.

sepia(Prozent) Konvertiert das Bild in Sepia.
  • 0% ist Standard, das Bild wird nicht verändert
  • 100% wird das Bild vollständig Sepia machen

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.