使用CSS更改PNG图像的颜色

最新推荐文章于 2022-10-11 10:08:07 发布

qq_43067585

最新推荐文章于 2022-10-11 10:08:07 发布

阅读量3k

点赞数 1

分类专栏： CSS 文章标签： css

原文链接：https://www.html.cn/qa/css3/10311.html

版权

CSS 专栏收录该内容

29 篇文章 4 订阅

订阅专栏

给定一个图像，如何使用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：使用灰度滤镜将彩色图像更改为灰度图像

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

输出：

原始图像：

应用过滤器后：

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

<!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 src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg"
       class = "image1"  width="500px" height="250px" alt="filter applied" />
          
     <img src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg"
       class = "image2"  width="500px" height="250px" alt="filter applied" /> 
	</body>
	</body>

</html>

效果图：

更多web前端知识，请查阅 HTML中文网！！

qq_43067585

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用CSS更改PNG图像的颜色

给定一个图像，如何使用CSS更改PNG图像的颜色？下面本篇文章就来给大家使用CSS更改PNG图像颜色的方法，希望对大家有所帮助。在CSS中使用Filter属性，利用滤镜功能来更改png图像颜色；CSS的Filter属性主要用于设置图像的视觉效果。Filter属性存在许多属性值：filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|sat.
复制链接

扫一扫