Heim >Web-Frontend >CSS-Tutorial >Ändern Sie schnell die Farbe eines PNG-Bildes mit CSS (zwei Methoden)
Im vorherigen Artikel „Wie erstelle ich einen Glas-/Unschärfeeffekt mit HTML und CSS?“ 》Der Artikel stellt Ihnen die Methode zur Verwendung von HTML und CSS zum Erstellen von Glas-/Unschärfeeffekten vor. Interessierte Freunde können es lesen und lernen. ~
In diesem Artikel erfahren Sie, wie Sie mit CSS schnell die Farbe von PNG-Bildern ändern , was auch eine tägliche Entwicklung ist. Eine relativ häufige Methode, um Effekte zu erzielen.
Zunächst können Sie das in diesem Artikel gezeigte PNG-Bildmaterial herunterladen, Download-Adresse: //m.sbmmt.com/xiazai/sucai/1733
(Sie können das Originalbild herunterladen hierhier)
Jetzt stelle ich Ihnen zwei Implementierungsmethoden vor:
Die erste Methode
In diesem Beispiel wird ein Graustufenfilter verwendet, um ein Farbbild in ein Graustufenbild umzuwandeln.
Der Code lautet wie folgt:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<h2>灰度图像</h2>
<img src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>Der Effekt ist wie folgt:
Die zweite Methode
Dieses Beispiel verwendet viele Filter für das Bild~
Der Code lautet wie folgt:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
width:40%;
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img class = "image1" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
<img class = "image2" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html> Der Effekt ist wie folgt:
Dann müssen Sie hier ein wichtiges Attributfilter verstehen:
Das Filterattribut definiert den visuellen Effekt (wie Unschärfe und Sättigung) des Elements (normalerweise ).
Filter-Attribut wird hauptsächlich verwendet, um den visuellen Effekt des Bildes festzulegen. Es gibt viele Attributwerte in der Filterfunktion. Die Syntax lautet wie folgt:
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜Filter verwenden normalerweise Prozentsätze (z. B. 75 %). Natürlich können sie auch in Dezimalzahlen ausgedrückt werden (z. B.: 0,75).
Hinweis: Das nicht standardmäßige „Filter“-Attribut, das von älteren Versionen von Internet Explorer (4.0 bis 8.0) unterstützt wird, ist veraltet. IE8- und niedrigere Browser verwenden normalerweise das Opazitätsattribut.
Die chinesische Website-Plattform PHP verfügt über viele Video-Lehrressourcen. Jeder ist herzlich willkommen, das „CSS-Video-Tutorial“ zu lernen!
Das obige ist der detaillierte Inhalt vonÄndern Sie schnell die Farbe eines PNG-Bildes mit CSS (zwei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!