Home > Web Front-end > CSS Tutorial > Quickly change the color of a PNG image using CSS (two methods)

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

藏色散人
Release: 2021-10-18 17:14:42
Original
5831 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: //m.sbmmt.com/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)).

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template