• 微信号:wumiao_357234902
您当前的位置:首页>web前端开发>CSS

css中filter对纯色png图片改变颜色

作者:Miao 阅读:2284次

大家会发现,在做项目的时候,会出现一个图标多个颜色,但是大小都比较相近,但是又不能为了几张图片去加载一个矢量图库,所以很多时候可能就会切几张图。其实filter已经有对纯色图片进行颜色调整的功能。


这里具体会用到filter里的:色相旋转hue-rotate(deg) | saturate(%) | brightness(%),这几个数值是可以在ps具体看到的,看下图:


下面我们来把图片改为绿色:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css中filter对纯色png图片改变颜色</title>
		<style type="text/css">
			img {
				filter: hue-rotate(121deg) saturate(100%) brightness(70%)
			}
		</style>
	</head>
	<body>
		<img src="2.png" />
	</body>
</html>

效果如下:

本站部分文章、数据、素材收集于互联网,一切版权均归源网站或原作者所有!

如果侵犯了您的权益请来信告知我们删除,邮箱:357234902@qq.com

标签:CSS