在线咨询
QQ咨询
服务热线

020-85201717

13725302004

业务微信

微信开发

TOP

教你如何用CSS更改PNG图像的颜色

发布时间:2019-09-29 浏览:

给定一个图像,如何使用CSS更改PNG图像的颜色?下面本篇文章就来给大家使用CSS更改PNG图像颜色的方法,希望对大家有所帮助。


在CSS中使用Filter属性,利用滤镜功能来更改png图像颜色;CSS的Filter属性主要用于设置图像的视觉效果。


Filter属性存在许多属性值:


filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale() |hue-rotate()|invert()|opacity()|saturate()|sepia()|url();

示例1:使用灰度滤镜将彩色图像更改为灰度图像:


Markup

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>转换为灰度图像</title>

<style>

img {

filter: grayscale(10);

}

</style>

</head>


<body>

<img src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg" 

        width="500px" height="250px" alt="filter applied" />

</body>

</body>


</html>


本段代码来自 https://www.jiangweishan.com/article/html9iit909.html

示例2:此示例对图像使用许多过滤器。


Markup

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>将图像转换为不同的颜色</title>

<style>

img {  

                float:left; 

            } 

            .image1 { 

                filter: invert(100%); 

            } 

            .image2 { 

                filter: sepia(100%);    

            }

</style>

</head>


<body>

    <img class = "image1" src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg"

        width="500px" height="250px" alt="filter applied" />


/body>

</html>