Unterstützt CSS3 Filter?

CSS3 unterstützt eine Vielzahl von Filtern. In CSS3 kann das Filterattribut verwendet werden, um Filtereffekte zu Elementen hinzuzufügen. Dieses Attribut verfügt über mehrere integrierte Filterfunktionen: „blur()“ legt den Unschärfefilter fest, „brightness()“ legt den Helligkeitsfilter fest, „contrast()“ legt den Kontrastfilter fest. greyscale() Setzt Graustufenfilter usw.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS3 unterstützt viele Arten von Filtern. Über das CSS3-Filterattribut können wir Filtereffekte ähnlich wie Photoshop erstellen. Erstellen Sie beispielsweise Unschärfeeffekte, Schatteneffekte, Farbfiltereffekte usw. für Bilder.

Wenn beide Werte0 stark sind > erscheint der Schatten direkt hinter dem Element (wenn eingestellt ist <code style="font-style: normal;line-height: 1.5">c71cdf9ac013f675be9247ca086815c8 und/oder <code style="font-style: normal;line-height: 1.5">5e387985f926f4cd5497444dde74a02d,Es wird ein Unschärfeeffekt auftreten).<code style="font-style: normal;line-height: 1.5">

< ; Blur-Radius> (optional)

Dies ist der dritte Code>d82af2074b26fcfe177e947839b5d381 Er wird größer und heller. Wenn nicht festgelegt, ist der Standardwert 0 (der Rand des Schattens ist sehr scharf).

5e387985f926f4cd5497444dde74a02d (Optional)

Dies ist der vierte f64b6a55ab9e6ef9d223847f6e594c7e-Wert führt dazu, dass der Schatten schrumpft. Wenn er nicht festgelegt ist, ist der Standardwert 0 (der Schatten hat die gleiche Größe wie das Element).

Hinweis: Webkit und einige andere Browser unterstützen die vierte Länge nicht und werden nicht gerendert, wenn sie hinzugefügt werden.

b10fb37415d019cfffa8c4d7366c607f (optional)

Den Wert von b10fb37415d019cfffa8c4d7366c607f anzeigen Mögliche Schlüsselwörter und Tags. Wenn nicht festgelegt, basiert der Farbwert auf dem Browser. In Gecko (Firefox), Presto (Opera) und Trident (Internet Explorer) wird der Wert der Eigenschaft colorcolor angewendet. Wenn außerdem der Farbwert weggelassen wird, ist der Schatten in WebKit transparent.

<code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5"> li> code>%

Filter	Beschreibung
Unschärfe (px)	Setzt die Gaußsche Unschärfe für das Bild ein. Der „Radius“-Wert legt die Standardabweichung der Gaußschen Funktion fest, oder wie viele Pixel auf dem Bildschirm zusammengemischt werden. Je größer der Wert, desto unschärfer ist er. Wenn kein Wert festgelegt ist, ist der Standardwert 0; Dieser Parameter kann den CSS-Längenwert festlegen, akzeptiert jedoch keine Prozentwerte.
Helligkeit(%)	Wenden Sie eine lineare Multiplikation auf das Bild an, um es heller oder dunkler erscheinen zu lassen. Bei einem Wert von 0 % ist das Bild komplett schwarz. Wenn der Wert 100 % beträgt, erfolgt keine Änderung am Bild. Andere Werte entsprechen linearen Multiplikatoreffekten. Werte über 100 % sind in Ordnung und das Bild wird heller als zuvor. Wenn kein Wert festgelegt ist, ist der Standardwert 1.
Kontrast(%)	Passen Sie den Kontrast des Bildes an. Bei einem Wert von 0 % ist das Bild komplett schwarz. Der Wert beträgt 100 % und das Bild bleibt unverändert. Die Werte können 100 % überschreiten, was bedeutet, dass ein niedrigerer Vergleich verwendet wird. Wenn kein Wert festgelegt ist, ist der Standardwert 1.
Drop-Shadow (H-Shadow V-Shadow Blur Spread Color)	Legt einen Schatteneffekt für das Bild fest. Schatten werden unter dem Bild zusammengesetzt und können unscharfe, versetzte Versionen der Matte aufweisen, die in einer bestimmten Farbe gemalt werden können. Die Funktion akzeptiert Werte vom Typ 2682287aecd16e99c4f70c025ad645ed (im CSS3-Kontext definiert), mit der Ausnahme, dass das Schlüsselwort „inset“ nicht zulässig ist. Diese Funktion ist der vorhandenen Box-Shadow-Eigenschaft sehr ähnlich; der Unterschied besteht darin, dass einige Browser über Filter eine Hardwarebeschleunigung für eine bessere Leistung bereitstellen. <code style="font-style: normal;line-height: 1.5">2682287aecd16e99c4f70c025ad645edDie Parameter lauten wie folgt:<code style="font-style: normal;line-height: 1.5">2682287aecd16e99c4f70c025ad645ed参数如下： <code style="font-style: normal;line-height: 1.5"><ul> <li> <strong>8b89863bbb9a724179580669ccdd6d16</strong> <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong> <small>(必须)</small> </li> <li>这是设置阴影偏移量的两个 d82af2074b26fcfe177e947839b5d381值. <strong>8b89863bbb9a724179580669ccdd6d16</strong> 设定水平方向距离. 负值会使阴影出现在元素左边. <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong>设定垂直距离.负值会使阴影出现在元素上方。查看<strong>d82af2074b26fcfe177e947839b5d381</strong>可能的单位.<br> <strong><span style="font-family:Open Sans, sans-serif">如果两个值都是</span>0</strong>, 则阴影出现在元素正后面 (如果设置了<span style="line-height: 1.5"> </span><code style="font-style: normal;line-height: 1.5">747111f72d266ea1b5d91cda9f8aa39e<span style="line-height: 1.5"> and/or </span><code style="font-style: normal;line-height: 1.5">5e387985f926f4cd5497444dde74a02d，<span style="line-height: 1.5">会有模糊效果</span><span style="line-height: 1.5">).</span> <code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5"> 747111f72d266ea1b5d91cda9f8aa39e (可选) 这是第三个code>d82af2074b26fcfe177e947839b5d381值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利). 5e387985f926f4cd5497444dde74a02d (可选) 这是第四个 d82af2074b26fcfe177e947839b5d381值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).  注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。   b10fb37415d019cfffa8c4d7366c607f (可选) 查看 b10fb37415d019cfffa8c4d7366c607f该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。 <code style="font-style: normal;line-height: 1.5"><code style="font-style: normal;line-height: 1.5"> <code style="font-style: normal;line-height: 1.5"><ul> <li> <strong>8b89863bbb9a724179580669ccdd6d16</strong> <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong> <small>(erforderlich)</small> </li> <li> Dies ist die Einstellung Zwei f64b6a55ab9e6ef9d223847f6e594c7e-Werte für den Schattenversatz. <strong>8b89863bbb9a724179580669ccdd6d16</strong> Legt den horizontalen Abstand fest . <strong>d1d21daad911d430a139ccdb7ee6c1d6</strong>Legt den vertikalen Abstand fest. Mögliche Einheiten anzeigen </li> </ul>
Graustufen(	) 🎜Konvertieren Sie das Bild in Graustufen. Der Wert definiert den Umfang der Konvertierung. Bei einem Wert von 100 % wird das Bild vollständig in Graustufen umgewandelt, bei einem Wert von 0 % bleibt das Bild unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn nicht festgelegt, ist der Wert standardmäßig 0;
Farbtondrehung (Grad)	Wenden Sie eine Farbtondrehung auf ein Bild an. Der Wert „Winkel“ legt den Winkel des Farbkreises fest, um den das Bild angepasst wird. Wenn der Wert 0 Grad beträgt, ändert sich das Bild nicht. Wenn der Wert nicht festgelegt ist, ist der Standardwert 0 Grad. Obwohl dieser Wert keinen Maximalwert hat, ist ein Wert über 360 Grad gleichbedeutend mit einer erneuten Drehung.
invert(%)	Invertieren Sie das Eingabebild. Der Wert definiert den Umfang der Konvertierung. 100 % des Wertes bedeuten eine vollständige Umkehr. Ein Wert von 0 % bedeutet, dass sich das Bild nicht verändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn der Wert nicht festgelegt ist, wird der Wert standardmäßig auf 0 gesetzt.
Deckkraft ( %)	Konvertieren Sie die Transparenz des Bildes. Der Wert definiert den Umfang der Konvertierung. Ein Wert von 0 % bedeutet vollständige Transparenz, ein Wert von 100 % bedeutet keine Veränderung des Bildes. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts, äquivalent zur Multiplikation der Anzahl der Bildbeispiele. Wenn der Wert nicht festgelegt ist, ist der Wert standardmäßig 1. Diese Funktion ist dem vorhandenen Opazitätsattribut sehr ähnlich, mit der Ausnahme, dass einige Browser über den Filter eine Hardwarebeschleunigung bereitstellen, um die Leistung zu verbessern.
saturate(%)	Bildsättigung konvertieren. Der Wert definiert den Umfang der Konvertierung. Ein Wert von 0 % bedeutet, dass das Bild vollständig entsättigt ist, und ein Wert von 100 % bedeutet, dass das Bild keine Änderungen aufweist. Andere Werte sind lineare Multiplikatoren des Effekts. Erlaubt sind Werte über 100 %, bei höherer Sättigung. Wenn der Wert nicht festgelegt ist, ist der Wert standardmäßig 1.
Sepia (%)	Bild in Sepia konvertieren. Der Wert definiert den Umfang der Konvertierung. Ein Wert von 100 % ergibt ein vollständiges 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 Wert standardmäßig 0;
url()	URL-Funktion akzeptiert eine XML-Datei, die einen SVG-Filter festlegt und einen Anker enthalten kann, um ein bestimmtes Filterelement anzugeben. Zum Beispiel: filter: url(svg-url#element-id)

Anwendungsbeispiel

/* 使用SVG filter */
filter: url("filters.svg#filter-id");
/* 使用filter函数 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* 多个filter */
filter: contrast(175%) brightness(3%);
/* 不使用filter */
filter: none;
/* 全局变量 */
filter: inherit;
filter: initial;
filter: unset;

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonUnterstützt CSS3 Filter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!