CSS filter Eigenschaft

Definition und Verwendung

Die filter-Eigenschaft definiert die visuelle Wirkung des Elements (meistens <img>), wie z.B. Verwischen und Sättigung.

Weitere Informationen siehe:

CSS-Tutorial:CSS-Bilder

HTML DOM Referenzhandbuch:filter-Eigenschaft

Beispiel

Alle Bilder in Schwarzweiß (100% Grau) ändern:

img {
  filter: grayscale(100%);
}

Versuchen Sie es selbst

Hinweis:Mehr TIY-Beispiele finden Sie unten auf der Seite.

CSS-Syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Hinweis:Um mehrere Filter zu verwenden, trenne sie mit Leerzeichen (siehe weitere Beispiele am Ende der Seite).

Technische Details

Standardwert: none
Vererbung: Nein
Animationserstellung: Unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS3
JavaScript-Syntax: object.style.filter="grayscale(100%)"

Filterfunktion

Anmerkung:Verwende Prozentsatzwerte (z.B. 75%) für Filter, akzeptiert auch Dezimalwerte (z.B. 0.75).

Filter Beschreibung
none Standardwert. Legt einen fehlenden Effekt fest.
blur(px)

Wendet einen weichen Effekt auf das Bild an. Größere Werte erzeugen mehr Verwischung.

Wenn ein spezifischer Wert angegeben ist, wird 0 verwendet.
brightness(%)

Anpassung der Bildhelligkeit.

  • 0% macht das Bild vollständig schwarz.
  • Die Standardwerte sind 100%, was das Originalbild bedeutet.
  • Werte über 100% bieten ein helleres Ergebnis.
contrast(%)

Anpassung der Bildkontraste.

  • 0% macht das Bild vollständig schwarz.
  • Die Standardwerte sind 100%, was das Originalbild bedeutet.
  • Werte über 100% bieten ein höher kontrastreiches Ergebnis.
drop-shadow(h-shadow v-shadow blur spread color)

Wendet einen Schatten-Effekt auf das Bild an.

Mögliche Werte:

  • h-shadow - Erforderlich. Gibt den Pixelwert für den horizontalen Schatten an. Negative Werte platzieren den Schatten auf der linken Seite des Bildes.
  • v-shadow - Erforderlich. Gibt den Pixelwert für den vertikalen Schatten an. Negative Werte platzieren den Schatten über dem Bild.

blur - Optional. Dies ist der dritte Wert, der in Pixeln angegeben sein muss. Fügt dem Schatten einen weichen Effekt hinzu. Je höher der Wert, desto mehr Verwischung wird erzeugen (der Schatten wird größer und heller). Negative Werte sind nicht erlaubt. Wenn kein Wert angegeben ist, wird 0 verwendet (der Schatten hat eine scharfe Kante).

spread - Optional. Dies ist der vierte Wert, der in Pixeln angegeben sein muss. Positive Werte führen dazu, dass der Schatten sich ausdehnt und größer wird, negative Werte führen dazu, dass der Schatten kleiner wird. Wenn kein Wert angegeben ist, wird 0 verwendet (der Schatten hat die gleiche Größe wie das Element).

Anmerkung:Chrome, Safari und Opera sowie möglicherweise andere Browser unterstützen die vierte Länge nicht; wenn sie hinzugefügt wird, wird sie nicht dargestellt.

color - Optional. Fügt dem Schatten eine Farbe hinzu. Wenn keine Farbe angegeben ist, hängt die Farbe vom Browser ab (normalerweise schwarz).

Dieser Beispiel erstellt einen roten Schatten mit einer Breite und Höhe von 8px sowie einer 10px weichen Effekt:

filter: drop-shadow(8px 8px 10px red);

Hinweis:Dieser Filter ähnelt dem box-shadow-Attribut.
grayscale(%);

Konvertieren Sie das Bild in Graustufen.

  • 0% (0) ist der Standardwert und stellt das ursprüngliche Bild dar.
  • 100% macht das Bild vollständig grau (für Schwarz-Weiß-Bilder).

Anmerkung:Negative Werte sind nicht erlaubt.
hue-rotate(deg);

Wenden Sie eine Farbwinkel-Drehung auf das Bild an. Dieser Wert definiert den Grad des Farbkreises. Der Standardwert ist 0deg, was das ursprüngliche Bild darstellt.

Anmerkung:Der Maximalwert ist 360deg.
invert(%);

Drehen Sie die Probe im Bild um.

  • 0% (0) ist der Standardwert und stellt das ursprüngliche Bild dar.
  • 100% macht das Bild vollständig umkehren.

Anmerkung:Negative Werte sind nicht erlaubt.
opacity(%);

Setzen Sie das Transparenzniveau des Bildes. opacity-level beschreibt das Transparenzniveau, wobei:

  • 0% ist vollständig transparent.
  • 100% (1) ist der Standardwert und stellt das ursprüngliche Bild dar (undurchsichtig).

Anmerkung:Negative Werte sind nicht erlaubt.

Hinweis:Dieser Filter ähnelt dem opacity-Attribut.
saturate(%);

Setzen Sie die Sättigung des Bildes.

  • 0% (0) macht das Bild vollständig unsaturated.
  • 100% ist der Standardwert und stellt das ursprüngliche Bild dar.
  • Werte über 100% liefern überbelichtete Ergebnisse.

Anmerkung:Negative Werte sind nicht erlaubt.
sepia(%);

Konvertieren Sie das Bild in Braun-ton.

  • 0% (0) ist der Standardwert und stellt das ursprüngliche Bild dar.
  • 100% macht das Bild vollständig braun.

Anmerkung:Negative Werte sind nicht erlaubt.
url();

Die Funktion url() akzeptiert die Position der XML-Datei des SVG-Filterns und kann einen Anchor für ein bestimmtes Filter-Element enthalten. Beispiel:

filter: url(svg-url#element-id);
initial Setzen Sie dieses Attribut auf seinen Standardwert. Siehe initial.
inherit Erben dieses Attributs vom übergeordneten Element. Siehe inherit.

Mehr Beispiele

Verschwommenes Beispiel

Hinzufügen eines verschwommenen Effekts zum Bild:

img {
  filter: blur(5px);
}

Versuchen Sie es selbst

Verschwommenes Beispiel 2

Anwenden eines verschwommenen Hintergrundbildes:

img.background {
  filter: blur(35px);
}

Versuchen Sie es selbst

Helligkeit-Beispiel

Anpassen der Helligkeit des Bildes:

img {
  filter: brightness(200%);
}

Versuchen Sie es selbst

Kontrast-Beispiel

Anpassen der Kontrast des Bildes:

img {
  filter: contrast(200%);
}

Versuchen Sie es selbst

Schatten-Beispiel

Anwenden eines Schatten-Effekts auf das Bild:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Versuchen Sie es selbst

Graustufen-Beispiel

Das Bild in Graustufen umwandeln:

img {
  filter: grayscale(50%);
}

Versuchen Sie es selbst

Farbtonrotation-Beispiel

Farbtonrotation auf dem Bild anwenden:

img {
  filter: hue-rotate(90deg);
}

Versuchen Sie es selbst

Umkehrbeispiel

Die Proben im Bild umkehren:

img {
  filter: invert(100%);
}

Versuchen Sie es selbst

Transparenzbeispiel

Den Transparenzgrad des Bildes einstellen:

img {
  filter: opacity(30%);
}

Versuchen Sie es selbst

Sättigkeitsbeispiel

Die Sättigung des Bildes anpassen:

img {
  filter: saturate(800%);
}

Versuchen Sie es selbst

Sepia-Beispiel

Das Bild in Sepia umwandeln:

img {
  filter: sepia(100%);
}

Versuchen Sie es selbst

Verwendung mehrerer Filter

Um mehrere Filter zu verwenden, trennen Sie sie mit Leerzeichen. Beachten Sie, dass die Reihenfolge wichtig ist (z.B. wird das Bild nach sepia() mit grayscale() vollständig grau werden):

img {
  filter: contrast(200%) brightness(150%);
}

Versuchen Sie es selbst

Alle Filter

Demonstration aller Filterfunktionen:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Versuchen Sie es selbst

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.

Zahlen mit -webkit- bedeuten die erste Version, die den Präfix verwendet.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Anmerkung:Ältere Versionen von Internet Explorer (4.0 bis 8.0) unterstützen den abgekündigten nicht-standardisierten "filter"-Attribut. Er wird hauptsächlich zur Transparenz verwendet, wenn die Unterstützung für IE8 und frühere Versionen erforderlich ist.