CSS3-Filter-Eigenschaft

Beispiel

Ändern Sie die Farbe aller Bilder in Schwarzweiß (100% Graustufen):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Selbst ausprobieren »

Definition und Verwendung

Die Eigenschaft filter definiert visuelle Effekte (wie Unschärfe und Sättigung) für ein Element (normalerweise <img>).

Standardwert: none
Vererbt: nein
Animation-Unterstützung: Ja. Weitere Details finden Sie unterCSS-Animationen
Version: CSS3
JavaScript-Syntax: object.style.WebkitFilter="grayscale(100%)" Selbst ausprobieren »

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Methode unterstützt.

Das direkt auf die Zahl folgende -webkit- ist das Präfix für den angegebenen Browser.

Eigenschaft
filter 18.0 -webkit- 13.0 35.0 6.0 -webkit- 15.0 -webkit-

Hinweis:Das nicht standardmäßige "filter"-Attribut, das von älteren Internet Explorer-Browsern (4.0 bis 8.0) unterstützt wurde, ist veraltet. IE8 und ältere Browser verwenden normalerweiseopacityEigenschaft.

CSS-Syntax

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

Tipp:Verwenden Sie Leerzeichen, um mehrere Filter zu trennen.

Filterfunktion

Hinweis:Filter verwenden normalerweise Prozentwerte (z. B. 75%), können aber auch als Dezimalzahlen angegeben werden (z. B. 0.75).

Filter Beschreibung
none Standardwert, keine Wirkung.
blur(px) Wendet eine Gaußsche Unschärfe auf das Bild an. Der "radius"-Wert legt die Standardabweichung der Gaußschen Funktion fest, oder wie viele Pixel auf dem Bildschirm miteinander vermischt werden; je größer der Wert, desto verschwommener ist das Bild;

Wenn kein Wert festgelegt ist, wird standardmäßig 0 verwendet; dieser Parameter akzeptiert CSS-Längenwerte, aber keine Prozentwerte.
brightness(%) Wendet eine lineare Multiplikation auf das Bild an, wodurch es heller oder dunkler erscheint. Wenn der Wert 0% ist, wird das Bild vollständig schwarz. Ein Wert von 100% lässt das Bild unverändert. Andere Werte entsprechen dem linearen Multiplikatoreffekt. Werte über 100% sind ebenfalls erlaubt, wodurch das Bild heller als zuvor wird. Wenn kein Wert festgelegt ist, ist der Standardwert 1.
contrast(%) Passt den Kontrast des Bildes an. Wenn der Wert 0% ist, wird das Bild vollständig schwarz. Ein Wert von 100% lässt das Bild unverändert. Werte können 100% überschreiten, was bedeutet, dass ein geringerer Kontrast angewendet wird. Wenn kein Wert festgelegt ist, ist der Standardwert 1.
drop-shadow(h-shadow v-shadow blur spread color)

Wendet einen Schatteneffekt auf das Bild an. Der Schatten wird unter das Bild komponiert und kann eine verschwommene, versetzte Version der Maske sein, die in einer bestimmten Farbe gezeichnet wird. Die Funktion akzeptiert Werte des Typs <shadow> (definiert in CSS3-Hintergründen), außer dass das Schlüsselwort "inset" nicht erlaubt ist. Diese Funktion ist der bestehenden box-shadow-Eigenschaft sehr ähnlich; der Unterschied besteht darin, dass einige Browser über Filter Hardwarebeschleunigung für eine bessere Leistung bieten.<shadow>参数如下：

<offset-x> <offset-y> (必须)
These are two <length> values that set the shadow offset.<offset-x>Sets the horizontal distance. Negative values cause the shadow to appear to the left of the element.<offset-y>Sets the vertical distance. Negative values cause the shadow to appear above the element. See<length>Possible units.
如果两个值都是0, the shadow appears directly behind the element (if set <blur-radius> and/or <spread-radius>，会有模糊效果).
<blur-radius> (可选)
This is the third <length> value. The larger the value, the blurrier, and the shadow becomes larger and lighter. Negative values are not allowed. If not set, the default is 0 (the shadow's edges are sharp).
<spread-radius> (可选)
This is the fourth <length> value. Positive values cause the shadow to expand and grow larger; negative values cause the shadow to shrink. If not set, the default is 0 (the shadow will be the same size as the element).
Note: Webkit, as well as some other browsers, do not support the fourth length; if added, it will not be rendered.
 
<color> (可选)
See the possible keywords and tokens for the <color> value. If not set, the color value is based on the browser. In Gecko (Firefox), Presto (Opera), and Trident (Internet Explorer), color will be applied.colorThe value of the property. Additionally, if the color value is omitted, the shadow is transparent in WebKit.
grayscale(%)

Konvertiert das Bild in Graustufen. Der Wert definiert den Anteil der Konvertierung. Ein Wert von 100% konvertiert das Bild vollständig in Graustufen; ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikatoren des Effekts. Wenn nicht gesetzt, ist der Standardwert 0.
hue-rotate(deg)

Wendet eine Farbtonrotation auf das Bild an. Der Wert "angle" legt den Winkel im Farbtonkreis fest, um den das Bild angepasst wird. Ein Wert von 0deg lässt das Bild unverändert. Wenn der Wert nicht gesetzt ist, ist der Standardwert 0deg. Obwohl es keinen Maximalwert gibt, entsprechen Werte über 360deg einem erneuten Durchlaufen des Kreises.
invert(%)

Invertiert das Eingabebild. Der Wert definiert den Anteil der Konvertierung. Ein Wert von 100% invertiert das Bild vollständig. Ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikatoren des Effekts. Wenn der Wert nicht gesetzt ist, ist der Standardwert 0.
opacity(%)

Transformiert die Transparenz des Bildes. Der Wert definiert den Anteil der Konvertierung. Ein Wert von 0% ist vollständig transparent, ein Wert von 100% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikatoren des Effekts, was auch der Multiplikation der Bildabtastwerte mit dem Betrag entspricht. Wenn der Wert nicht gesetzt ist, ist der Standardwert 1. Diese Funktion ist der bestehenden opacity-Eigenschaft sehr ähnlich; der Unterschied besteht darin, dass einige Browser über filter Hardwarebeschleunigung für eine verbesserte Leistung bieten.
saturate(%)

Transformiert die Sättigung des Bildes. Der Wert definiert den Anteil der Umwandlung. Ein Wert von 0% ist vollständig ungesättigt, ein Wert von 100% lässt das Bild unverändert. Andere Werte sind lineare Multiplikatoren des Effekts. Werte über 100% sind zulässig und bewirken eine höhere Sättigung. Wenn der Wert nicht festgelegt ist, ist der Standardwert 1.
sepia(%)

Wandelt das Bild in Sepia um. Der Wert definiert den Anteil der Umwandlung. Ein Wert von 100% ist vollständig Sepia; ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikatoren des Effekts. Wenn nicht festgelegt, ist der Standardwert 0.
url()

Die URL-Funktion akzeptiert eine XML-Datei, die einen SVG-Filter definiert, und kann einen Anker enthalten, um ein bestimmtes Filterelement anzugeben.

Zum Beispiel:

filter: url(svg-url#element-id)
initial

Setzt die Eigenschaft auf ihren Standardwert, siehe:CSS-Schlüsselwort initial
inherit Erbt diese Eigenschaft vom übergeordneten Element, siehe:CSS-Schlüsselwort inherit
Examples

Weitere Beispiele

Weichzeichnen-Beispiel

Wenden Sie einen Gaußschen Weichzeichnungseffekt auf das Bild an:

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

Selbst ausprobieren »

Beispiel für die Helligkeitsfunktion

Das Bild aufhellen:

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}

Selbst ausprobieren »

Beispiel für die contrast-Funktion

Den Kontrast des Bildes anpassen:

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

Selbst ausprobieren »

Beispiel für die drop-shadow-Funktion

Einen Schatteneffekt auf das Bild anwenden:

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

Selbst ausprobieren »

Beispiel für die grayscale-Funktion

Konvertieren Sie das Bild in ein Graustufenbild:

img {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

Selbst ausprobieren »

Beispiel für die Funktion hue-rotate()

Wenden Sie eine Farbtonrotation auf das Bild an:

img {
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}

Selbst ausprobieren »

Beispiel für die invert-Funktion

Invertieren Sie das Eingabebild:

img {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

Selbst ausprobieren »

Beispiel für die opacity-Funktion

Ändern Sie die Deckkraft des Bildes:

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}

Selbst ausprobieren »

Beispiel für die Saturate-Funktion

Ändern Sie die Sättigung des Bildes:

img {
    -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
    filter: saturate(800%);
}

Selbst ausprobieren »

Beispiel für die Sepia-Funktion

Konvertieren Sie das Bild in Sepia:

img {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}

Selbst ausprobieren »

Zusammengesetzte Funktion

Verwenden Sie mehrere Filter und trennen Sie jeden durch Leerzeichen.

Hinweis:Die Reihenfolge ist sehr wichtig (zum Beispiel führt die Verwendung von grayscale() und danach sepia() zu einem vollständig graustufigen Bild).

img {
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    filter: contrast(200%) brightness(150%);
}

Selbst ausprobieren »

Alle Filterbeispiele

Die folgenden Beispiele zeigen die Verwendung aller Filter:

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}

Selbst ausprobieren »

Ähnliche Artikel

HTML-DOM-Referenzhandbuch:Style filter-Eigenschaft

Weitere Erweiterungen