Detaillierte grafische Erläuterung der Verwendung des Filterattributs in CSS3 (Beispielcode)

Ich habe kürzlich im Internet ein besonders cooles Attribut entdeckt, nämlich das Filterattribut in CSS3. Dieses Attribut kann die Farbe des Bildes ändern Erfahren Sie, wie Sie Filter in CSS3 verwenden, sowie ein Beispiel, um die Wirkung des Filters zu demonstrieren. Wenn Sie interessiert sind, lesen Sie bitte weiter unten.

Viele Menschen wissen nicht, was CSS-Filter bedeutet. Laienhaft ausgedrückt bezieht sich Filter auf einen Filter. Das offiziell definierte Filterattribut kann den visuellen Effekt (z. B. Unschärfe und Sättigung) eines Elements festlegen (normalerweise ).

Filterattribut: keine | saturate() |. sepia() |. url();

Verwendung: Wenn , fügen Sie einfach das Filterattribut direkt zum Bild hinzu, das festgelegt werden muss.

Sie können sehen, dass seine Attribute viele optionale Werte haben

1. Graustufen-Graustufen

2 )

3. Farbton-Rotation

5. Deckkraft Transparenz

7 🎜>

8, Kontrast

9, Unschärfe

10, Schlagschatten

Beispiel 1:

Verwendung das Filterattribut, um das Bild in ein Graustufenbild umzuwandeln, und der Wert ist das Konvertierungsverhältnis. Wenn der Wert 100 % beträgt, wird das Bild vollständig in ein Graustufenbild umgewandelt. Wenn der Wert 0 % beträgt, erfolgt keine Änderung im Bild. Wenn der Wert zwischen 0 % und 100 % liegt, liegt es zwischen der vollständigen Graustufendarstellung und dem Original Bild. In diesem Beispiel ist die Graustufe auf 50 % eingestellt

HTML-Code:

<img  src="/static/imghw/default1.png"  data-src="img/草莓.jpg"  class="lazy"      style="max-width:90%" height="192px"/ alt="Detaillierte grafische Erläuterung der Verwendung des Filterattributs in CSS3 (Beispielcode)" >

CSS-Code:

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

Rendering:

Ersteres ist das Originalbild und letzteres ist der auf 50 % Graustufen eingestellte Effekt.

Beispiel 2:

Verwenden Sie das Filterattribut, um das Bild auf Gaußsche Unschärfe einzustellen, und der Wert „Radius“ legt die Standardabweichung der Gaußschen Funktion oder die fest screen Gibt an, wie viele Pixel 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.

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

Rendering:

Stellen Sie in diesem Beispiel die Unschärfe auf 1,5 Pixel ein, um dem Bild einen Gaußschen Unschärfeeffekt zu verleihen, wie im Bild gezeigt.

Zusammenfassung: Das Obige stellt vor, wie der Bildfilterattributfilter in CSS3 verwendet wird. Es gibt nur zwei Demonstrationen. Was andere Attribute betrifft, können Freunde ihre eigenen erstellen Probieren Sie es aus und Sie erhalten möglicherweise unerwartete Ergebnisse.

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung der Verwendung des Filterattributs in CSS3 (Beispielcode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!