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>

效果如下：