Quickly change the color of a PNG image using CSS (two methods)-CSS Tutorial-php.cn

Quickly change the color of a PNG image using CSS (two methods)

藏色散人

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

Original

5775 people have browsed it

In the previous article "How to create glass/blur effect using HTML and CSS? 》The article introduces you to the method of using HTML and CSS to create glass/blur effects. Interested friends can read and learn about it~

This article will introduce to you how to use CSS to quickly change PNG images. Color, this is also a common effect implementation method in daily development.

First of all, you can download the png picture material shown in this article, download address: https://www.php.cn/xiazai/sucai/1733

Quickly change the color of a PNG image using CSS (two methods)

(You can download the original picture at here)

Now I will introduce you to two implementation methods:

First Method

This example uses a grayscale filter to change a color image to a grayscale image.

The code is as follows:

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

Copy after login

The effect is as follows:

Quickly change the color of a PNG image using CSS (two methods)

##The second method

This example uses a lot of filters for the image~

The code is as follows:

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

Copy after login

The effect is as follows:

Quickly change the color of a PNG image using CSS (two methods)

So everyone needs to understand here An important attribute filter:

The filter attribute defines the visual effect (for example: blur and saturation) of the element (usually Quickly change the color of a PNG image using CSS (two methods)

Quickly change the color of a PNG image using CSS (two methods)

Filter attribute is mainly used to set the visual effect of the image. There are many attribute values in the Filter function. The syntax is as follows:

filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
        |hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜

Copy after login

Filters usually use percentages (such as: 75%), of course they can also be used Expressed as a decimal (eg: 0.75).

Note: The non-standard "filter" attribute supported by older versions of Internet Explorer (4.0 to 8.0) has been deprecated. IE8 and lower browsers usually use the opacity attribute.

PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "

css Video Tutorial"!

The above is the detailed content of Quickly change the color of a PNG image using CSS (two methods). For more information, please follow other related articles on the PHP Chinese website!