在前端开发中，经常会用到一个图标的两种或者多种颜色，来实现 hover、click 等实践的特效。如果图标较多，我可能会加载 Font Awesome 以及类似的矢量图标库。如果图标较少，一般都是通过 ps 等根据需求将图标调整成不同颜色并保存在项目中。其实对于纯色的 png 图片，我们完全可以通过 css filter 来调整颜色。

函数语法及说明

filter:hue-rotate(deg) | saturate(%) | brightness(%)
  • hue-rotate 函数在输入图像上应用色相旋转。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。
  • saturate 函数表示饱和度。
  • brightness 函数表示亮度。

示例

<!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>
原图为粉色
在网页中呈现绿色

(adsbygoogle = window.adsbygoogle || []).push({});