Eine detaillierte Einführung in das Filterattribut von CSS3

Heute werde ich Ihnen eine detaillierte Erklärung des Filterattributs in CSS3 geben. Es ist sehr leistungsfähig und kann ähnliche Operationen an den Bildern durchführen Webseite. Bildverarbeitungseffekte auf PS. Wir können CSS manipulieren, um Bilder zu verarbeiten.

Browserunterstützung: Nur

IE-Browser unterstützt das Filterattribut nicht. Um mit niedrigeren Versionen von Safari- und Google-Browsern kompatibel zu sein, ist das Präfix -webkit- erforderlich

Das Filterattribut (Filter) unterstützt derzeit die folgenden Effekte in der Spezifikation:

Graustufen-Graustufen (Wert ist eine Dezimalzahl zwischen 0-1)

filter:grayscale (1 ); -webkit-filter:grayscale(1);

0 bedeutet, dass die Graustufen 0 % betragen und das Originalbild angezeigt wird, 1 bedeutet, dass die Graustufen 100 % grau sind.

Sepiabraun (Wert ist eine Dezimalzahl zwischen 0-1)

filter:sepia(1); -webkit-filter:sepia(1);

0 bedeutet Der Bräunungsgrad beträgt 0 %, was das Originalbild anzeigt, und 1 bedeutet, dass der Bräunungsgrad 100 % beträgt, was Braun anzeigt.

Sättigung (Wert ist Zahl)

filter:saturate(1.8); -webkit-filter:saturate(1.8);

0 bedeutet, dass die Sättigung 0 ist, Bild wird angezeigt Schwarzweiß bedeutet 0,5, dass die Sättigung die Hälfte des Originalbilds beträgt, 1 bedeutet, dass die Sättigung dem Originalbild entspricht und ein Wert größer als 1 bedeutet, dass die Sättigung erhöht ist.

Farbtonrotation (Wert ist Winkel) Winkelgrad

filter:hue-rotate(60deg); -webkit-filter:hue-rotate(60deg);

Gibt den spezifischen Winkel der Farbtonrotation an.

invert invert color (Wert ist eine Dezimalzahl zwischen 0-1)

filter:invert(1); -webkit-filter:invert(1);

0 It bedeutet, dass das Originalbild ohne Farbinvertierung angezeigt wird. 1 bedeutet, dass die Farbe zu 100 % vollständig invertiert wird.

Deckkrafttransparenz (Wert ist eine Dezimalzahl zwischen 0 und 1)

filter:opacity(0.5); -webkit-filter:opacity(0.5);

0 bedeutet Vollständig transparent, 0,5 bedeutet durchscheinend, 1 bedeutet 100 % völlig undurchsichtig.

b

richtigness Helligkeit (Wert ist Zahl)

filter:brightness(2); -webkit-filter:brightness(2);

0 bedeutet, dass die Helligkeit 0 beträgt und Schwarz angezeigt wird, 0,5 bedeutet, dass die Helligkeit die Hälfte des Originalbilds beträgt, 1 bedeutet, dass die Helligkeit des Originalbilds beträgt und ein Wert größer als 1 bedeutet, dass die Helligkeit erhöht wird.

Kontrastkontrast (Wert ist Zahl)

filter:contrast(1.8); -webkit-filter:contrast(1.8);

0 bedeutet, dass der Kontrast 0 ist ist eine Volltonfarbe. 0,5 bedeutet, dass der Kontrast die Hälfte des Originalbilds beträgt. 1 bedeutet, dass der Kontrast des Originalbilds größer als 1 ist. Je größer der Wert, desto stärker ist der Kontrast.

Blur-Unschärfe (Wert ist Länge)

filter:blur(5px); -webkit-filter:blur(5px);

stellt den Pixelwert des Grades dar verwischen.

drop-shadow

filter:drop-shadow(0 0 10px #000); -webkit-filter:drop-shadow(0 0 10px #000);

Gleicher Wert wie die CSS3-Box-Shadow-Eigenschaft.

Mehrere Attributwerte können durch Leerzeichen getrennt zusammengeschrieben werden, ähnlich wie bei trans

fürm Multi-Attribut-Schreiben

Ich glaube, ich habe es gelesen. Sie beherrschen die Methoden in diesen Fällen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie CSS, um Bildrotationseffekte zu erstellen

Lösung für das Problem der Hintergrundfarbe kann nicht in HTML angezeigt werden

So optimieren Sie HTML-Webseiten

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in das Filterattribut von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!