Kann ich die Farbe eines Bildes per CSS ändern?-CSS-Tutorial-php.cn

Kann ich die Farbe eines Bildes per CSS ändern?

藏色散人

Freigeben： 2023-01-04 09:36:51

Original

4846 Leute haben es durchsucht

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. ;}".

Kann ich die Farbe eines Bildes per CSS ändern?

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 Kann ich die Farbe eines Bildes per CSS ändern? ). 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();

Nach dem Login kopieren

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:

Kann ich die Farbe eines Bildes per CSS ändern?

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>

Nach dem Login kopieren

Rendering:

Kann ich die Farbe eines Bildes per CSS ändern?

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>

Nach dem Login kopieren

Rendering:

Kann ich die Farbe eines Bildes per CSS ändern?

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!