So schreiben Sie CSS-Code, um Farben aus Bildern zu entfernen-CSS-Tutorial-php.cn

So schreiben Sie CSS-Code, um Farben aus Bildern zu entfernen

WBOY

Freigeben： 2021-11-30 18:30:22

Original

3698 Leute haben es durchsucht

Der Code für die Bildentfärbung in CSS lautet wie folgt: „Bildelement {filter:grayscale(100%);}“ Das Filterattribut wird zum Festlegen des visuellen Effekts des Bildes verwendet und kann mit der Graustufe( ) Funktion zum Anpassen der Graustufen des Bildes. Wenn der Graustufenwert auf „100 %“ eingestellt ist, kann der Bildentfärbungseffekt erzielt werden.

So schreiben Sie CSS-Code, um Farben aus Bildern zu entfernen

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So schreiben Sie CSS-Code für die Bildentfärbung

Wir können das Filterattribut verwenden, um die Bildentfärbung zu schreiben (normalerweise So schreiben Sie CSS-Code, um Farben aus Bildern zu entfernen ) ( Beispiel: Unschärfe vs. Sättigung).

Wenn der Attributwert Graustufen ist, konvertieren Sie das Bild in Graustufen. Der Wert definiert den Umfang der Konvertierung. Bei einem Wert von 100 % wird das Bild vollständig in Graustufen umgewandelt, bei einem Wert von 0 % bleibt das Bild unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn nicht festgelegt, ist der Wert standardmäßig 0;

Sehen wir uns das folgende Beispiel an:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
.img1 {
    filter: grayscale(100%);
}
    </style>
  <img  src="1118.02.png" class="img1" alt="So schreiben Sie CSS-Code, um Farben aus Bildern zu entfernen" >
  <img  src="1118.02.png" class="img2" alt="So schreiben Sie CSS-Code, um Farben aus Bildern zu entfernen" >
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

So schreiben Sie CSS-Code, um Farben aus Bildern zu entfernen

(Freigabe von Lernvideos: css-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo schreiben Sie CSS-Code, um Farben aus Bildern zu entfernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!