Style Filter-Eigenschaft

Definition und Verwendung

filter Eigenschaft, um visuelle Effekte (wie Unschärfe und Sättigung) zu den Bildern hinzuzufügen.

Weitere Informationen:

CSS-Referenzhandbuch:Filter-Eigenschaft

Beispiel

Die Farben des Bildes in Schwarz-Weiß ändern (100% Graustufe):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Selbst ausprobieren

Syntax

Filter-Eigenschaft zurückgeben:

object.style.filter

Filter-Eigenschaft setzen:

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Filter-Funktion

注释：Ein Filter mit Prozentwerten (z.B. 75%) wird auch Dezimalwerten (d.h. 0.75) akzeptiert.

Filter Beschreibung
none Kein Effekt definiert.
blur(px)

Anwenden eines Unschärfeeffekts auf das Bild. Ein höherer Wert verursacht mehr Unschärfe.

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

Stellen Sie die Helligkeit des Bildes ein.

0% lässt das Bild vollständig schwarz erscheinen.

100% (1) ist der Standardwert und stellt das ursprüngliche Bild dar.

Werte über 100% bieten helleres Ergebnis.
contrast(%)

Stellen Sie den Kontrast des Bildes ein.

0% lässt das Bild vollständig schwarz erscheinen.

100% (1) ist der Standardwert und stellt das ursprüngliche Bild dar.

Werte über 100% bieten niedrigere Kontraste.
drop-shadow(h-shadow v-shadow blur spread color)

Wenden Sie einen Schattenwirkung auf das Bild an.

Mögliche Werte：

h-shadow - Erforderlich. Geben Sie den Pixelwert für den horizontalen Schatten an. Negative Werte platzieren den Schatten auf der linken Seite des Bildes.

v-shadow - Erforderlich. Geben Sie den Pixelwert für den vertikalen Schatten an. Negative Werte platzieren den Schatten über dem Bild.

blur - Optional. Der dritte Wert muss in Pixel angegeben werden. Fügen Sie dem Schatten einen Verwischungseffekt hinzu. Größere Werte erzeugen mehr Verwischung (der Schatten wird größer und heller). Negative Werte sind nicht erlaubt. Wenn kein Wert angegeben ist, wird 0 verwendet (der Schatten hat scharfe Kanten).

spread - Optional. Der vierte Wert muss in Pixel angegeben werden. Positive Werte vergrößern und vergrößern den Schatten, negative Werte verkleinern den Schatten. Wenn nicht angegeben, beträgt er 0 (der Schatten ist so groß wie das Element).

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

color：Optional. Fügen Sie dem Schatten eine Farbe hinzu. Wenn nicht angegeben, hängt die Farbe vom Browser ab (normalerweise schwarz).

Hinweis：Dieser Filter ähnelt der box-shadow-Eigenschaft.
grayscale(%)

Wenden Sie das Bild in Graustufen um.

0% (0) ist der Standardwert und stellt das ursprüngliche Bild dar.

100% lässt das Bild vollständig in Graustufen umwandeln (für Schwarzweißbilder).

注释：Negative Werte sind nicht erlaubt.
hue-rotate(deg)

Wenden Sie eine Farbtonrotation auf das Bild an. Dieser Wert definiert die Gradzahl, um die die Bildproben um den Farbtonring angepasst werden sollen.

0deg ist der Standardwert und stellt das ursprüngliche Bild dar.

注释：Der maximale Wert beträgt 360 Grad.
invert(%)

kehren Sie die Proben im Bild um.

0% (0) ist der Standardwert und stellt das ursprüngliche Bild dar.

100% lässt das Bild vollständig umkehren.

注释：Negative Werte sind nicht erlaubt.
opacity(%)

Stellen Sie den Deckungsgrad des Bildes ein. Der Deckungsgrad beschreibt den Transparenzgrad, wobei:

0% ist vollständig transparent.

100% (1) ist der Standardwert und stellt das ursprüngliche Bild (ohne Transparenz) dar.

注释：Negative Werte sind nicht erlaubt.

Hinweis：Dieser Filter ähnelt der Opacity-Eigenschaft.
saturate(%)

Stellen Sie die Sättigung des Bildes ein.

0% (0) lässt das Bild vollständig unsättig appear.

100% ist der Standardwert und stellt das ursprüngliche Bild dar.

Werte über 100% bieten übertriebene Ergebnisse.

注释：Negative Werte sind nicht erlaubt.
sepia(%)

Konvertieren Sie das Bild in Brauntöne.

0% (0) ist der Standardwert und stellt das ursprüngliche Bild dar.

100% lässt das Bild vollständig in Brauntönen erscheinen.

注释：Negative Werte sind nicht erlaubt.

Technische Details

CSS-Version: CSS3

Browser-Unterstützung

Die in der Tabelle genannten Zahlen geben die erste Version des Browsers an, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0