Heim > Web-Frontend > CSS-Tutorial > Detaillierte grafische Erläuterung der Verwendung des Filterattributs in CSS3 (Beispielcode)

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

yulia
Freigeben: 2018-09-20 17:53:36
Original
2996 Leute haben es durchsucht

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 Detaillierte grafische Erläuterung der Verwendung des Filterattributs in CSS3 (Beispielcode)).

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="img/草莓.jpg"    style="max-width:90%" height="192px"/ alt="Detaillierte grafische Erläuterung der Verwendung des Filterattributs in CSS3 (Beispielcode)" >
Nach dem Login kopieren

CSS-Code:

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

Rendering:

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

Detaillierte grafische Erläuterung der Verwendung des Filterattributs in CSS3 (Beispielcode)Detaillierte grafische Erläuterung der Verwendung des Filterattributs in CSS3 (Beispielcode)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);
    }
Nach dem Login kopieren
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.

Detaillierte grafische Erläuterung der Verwendung des Filterattributs in CSS3 (Beispielcode)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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage