Ändern Sie schnell die Farbe eines PNG-Bildes mit CSS (zwei Methoden)-CSS-Tutorial-php.cn

Ändern Sie schnell die Farbe eines PNG-Bildes mit CSS (zwei Methoden)

藏色散人

Freigeben： 2021-10-18 17:14:42

Original

5775 Leute haben es durchsucht

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: https://www.php.cn/xiazai/sucai/1733

Ändern Sie schnell die Farbe eines PNG-Bildes mit CSS (zwei Methoden)

(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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Ändern Sie schnell die Farbe eines PNG-Bildes mit CSS (zwei Methoden)

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Ändern Sie schnell die Farbe eines PNG-Bildes mit CSS (zwei Methoden)

Dann müssen Sie hier ein wichtiges Attributfilter verstehen:

Das Filterattribut definiert den visuellen Effekt (wie Unschärfe und Sättigung) des Elements (normalerweise Ändern Sie schnell die Farbe eines PNG-Bildes mit CSS (zwei Methoden) ).

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();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜

Nach dem Login kopieren

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!