Heim > Artikel > Web-Frontend > Kann ich die Farbe eines Bildes per CSS ändern?
Kann ich die Farbe eines Bildes per CSS ändern?
- 藏色散人Original
- 2020-12-11 09:50:204771Durchsuche
css kann die Farbe von Bildern ändern: Erstellen Sie zuerst eine HTML-Beispieldatei und ändern Sie dann die Farbe des Bildes, indem Sie das Attribut des Bildes auf „img {filter: greyscale(10)“ setzen. ;}".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, Thinkpad T480-Computer.
Empfohlen: „CSS-Video-Tutorial“
CSS kann die Farbe von Bildern ändern.
Das Filterattribut definiert den visuellen Effekt des Elements (normalerweise ). Dieses Attribut wird hauptsächlich für Bildinhalte verwendet.
Dieses Attribut ist eine CSS-Methode zum Anwenden von Filtereffekten auf Elemente (hauptsächlich Bilder) auf der Webseite.
Syntax:
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Filterfunktion
Hinweis: Filter verwenden normalerweise Prozentsätze (z. B. 75 %). Natürlich können sie auch in Dezimalzahlen ausgedrückt werden (z. B. 0,75).
none: Dies ist der Standardwert, es werden keine Effekte angewendet.
brightness(): Legt die Helligkeit des Elements fest. Bei einer Helligkeit von 0 % ist es komplett schwarz, bei einer Helligkeit von 100 % entspricht es der Originalhelligkeit. Werte über 100 % führen zu helleren Elementen.
grayscale(): Legt die Graustufe des Elements fest, wodurch die Elementfarbe in Schwarzweiß umgewandelt wird. Graustufen 0 % stellt das ursprüngliche Element dar und 100 % stellt das vollständige Graustufenelement dar.
sepia(): Konvertiert das Bild in ein Sepiabild, wobei 0 % das Originalbild und 100 % vollständiges Sepia bedeutet.
contrast(): wird verwendet, um den Kontrast von Elementen anzupassen. 0 % Kontrast stehen für komplett schwarze Elemente, 100 % Kontrast für Originalelemente.
saturate(): wird verwendet, um die Sättigung eines Elements festzulegen. 0 % Sättigung bedeutet, dass das Element vollständig ungesättigt ist, 100 % Sättigung bedeutet, dass das Originalbild vorhanden ist. Werte über 100 % der Ergebnisse sind übersättigte Elemente.
blur(): Es wendet einen Unschärfeeffekt auf ein Element an. Wenn kein Fuzzy-Wert angegeben ist, ist der Standardwert 0.
opacity(): Legt den Deckkrafteffekt des Bildes fest. Eine Deckkraft von 0 % bedeutet, dass das Element vollständig transparent ist. Wenn die Deckkraft 100 % beträgt, handelt es sich um das Originalbild.
hue-rotate(): Wendet die Farbtonrotation auf das Bild an. Dieser Wert definiert den Grad, um den der Farbkreis des Bildbeispiels angepasst wird. Der Standardwert ist 0 Grad, was dem Originalbild entspricht. Obwohl dieser Wert keinen Maximalwert hat, entspricht ein Wert über 360 Grad einem erneuten Umdrehen.
invert(): Es invertiert Elemente. Der Standardwert ist 0 %, was dem Originalbild entspricht. Bei 100 % wird das Bild vollständig invertiert.
drop-shadow(): Wendet einen Schatteneffekt auf das Element an. Es akzeptiert H-Schatten, V-Schatten, Unschärfe, Ausbreitung und Farbe als Werte.
url(): Akzeptiert eine XML-Datei, die einen SVG-Filter festlegt und einen Anker enthalten kann, um ein bestimmtes Filterelement anzugeben.
Beschreibung: Auf ein Element können mehrere Filter angewendet werden, indem mehrere Filterfunktionen durch Leerzeichen getrennt werden.
Beispiel 1: Verwenden Sie einen Graustufenfilter, um ein Farbbild in ein Graustufenbild zu ändern.
Originalbild:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转换为灰度图像</title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>Rendering:
Beispiel 2: Dieses Beispiel verwendet viele Filter.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将图像转换为不同的颜色</title>
<style>
img {
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image1" width="500px" height="250px" alt="filter applied" />
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image2" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonKann ich die Farbe eines Bildes per CSS ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!