Home >Web Front-end >CSS Tutorial >Quickly change the color of a PNG image using CSS (two methods)
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
(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>
The effect is as follows:
##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>The effect is as follows:
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale() |hue-rotate()|invert()|opacity()|saturate()|sepia()|url(); ------------------------------------------------------------------------------- 使用空格分隔多个滤镜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 "
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!