Stil filterEigenschaft

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

<offset-x> <offset-y> (erforderlich)

Dies sind zwei <length>-Werte, die den Schattenversatz festlegen.<offset-x>Legt den horizontalen Abstand fest. Ein negativer Wert platziert den Schatten links vom Element.<offset-y>Legt den vertikalen Abstand fest. Ein negativer Wert platziert den Schatten oberhalb des Elements. Siehe<length>mögliche Einheiten.
Wenn beide Werte0, erscheint der Schatten direkt hinter dem Element (wenn festgelegt <blur-radius> and/or <spread-radius>，there will be a blur effect.).

<blur-radius> (optional)

Dies ist der dritte <length>-Wert. Je größer der Wert, desto unschärfer wird der Schatten, und der Schatten wird größer und heller. Negative Werte sind nicht erlaubt. Wenn er nicht gesetzt ist, ist der Standardwert 0 (die Schattenkante ist sehr scharf).

<spread-radius> (optional)

Dies ist der vierte <length>-Wert. Positive Werte erweitern und vergrößern den Schatten, negative Werte verkleinern den Schatten. Wenn er nicht gesetzt ist, ist der Standardwert 0 (der Schatten hat dieselbe Größe wie das Element).
Hinweis: WebKit und einige andere Browser unterstützen den vierten Längenwert nicht; wenn er hinzugefügt wird, wird er nicht gerendert.

 

<color> (optional)

Siehe <color> für mögliche Schlüsselwörter und Notationen für diesen Wert. Wenn er nicht gesetzt ist, hängt der Farbwert vom Browser ab. In Gecko (Firefox), Presto (Opera) und Trident (Internet Explorer) wird der colorcolor-Eigenschaftswert verwendet. Außerdem ist der Schatten in WebKit transparent, wenn der Farbwert weggelassen wird.

Wandelt das Bild in Graustufen um. Der Wert definiert den Anteil der Umwandlung. Ein Wert von 100% wandelt das Bild vollständig in Graustufen um, und ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikatoren des Effekts. Wenn er nicht gesetzt ist, ist der Standardwert 0.

Wendet eine Farbtonrotation auf das Bild an. Der Wert "angle" legt den Farbtonwinkel 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 Höchstwert gibt, entsprechen Werte über 360deg einer erneuten Umrundung des Farbkreises.

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.

Konvertiert die Transparenz des Bildes. Der Wert definiert den Anteil der Konvertierung. Ein Wert von 0% ist vollständig transparent, und ein Wert von 100% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikatoren des Effekts, äquivalent zur Multiplikation der Bild-Samples mit dem Betrag. Wenn der Wert nicht festgelegt ist, ist der Standardwert 1. Diese Funktion ist der vorhandenen opacity-Eigenschaft sehr ähnlich; der Unterschied besteht darin, dass über filter einige Browser Hardwarebeschleunigung bereitstellen, um die Leistung zu verbessern.

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

Konvertiert das Bild in Sepia. Der Wert definiert den Anteil der Konvertierung. Ein Wert von 100% ist vollständig Sepia, und 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.

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

Zum Beispiel:

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

Um die Eigenschaft auf ihren Standardwert festzulegen, siehe:CSS-Schlüsselwort initial