关于前端:用CSS也可以任意改变PNG图标颜色

在开发中图标跟咱们是如影随行的，在开始之前先聊一些题外话， 图标有什么作用？

• 通用图标能够代替文字说明，能更简洁地表白某个设计的用意，让用户看到图标就晓得它代表什么？有什么用处？
• LOGO 类图标能够起到品牌宣传，同时因图标更醒目，占据更大的地位，用户更容易点击。
• 看图片更合乎人的视觉需要，简洁的图片能升高人的信息焦虑。试想咱们如果看到一个满满的文字的页面，是不是经常有信息恐怖，可能就会抉择退出。

然而大多数状况下只有图标是不行的，还须要配上文字说明，如果用户看到一个图标，花很多工夫都不能了解它的意思，那图标的存在也失去了它应有的意义。

开发问题

1. 是不是常常会遇到这样的场景，在导航栏的图标默认显示为一种浅色，当鼠标移到下面时图标变为深色，起到反馈用户的作用。
2. 还有一些场景下应用图标来标识状态，比方红色示意谬误，黄色示意正告，绿色示意胜利。

如果是应用 png 格局的状况下，咱们会叫 UI 设计师提供给咱们不同色彩的图标。

正式开始

当初咱们就来解决下面这个麻烦的事件，应用 css 给 PNG 图标赋予任意色彩

当初 UI 设计师给了咱们一个示意状态的图标，当初咱们要应用 CSS 来扭转它的色彩

这里应用的是 CSS3 滤镜 filter 中的 drop-shadow 实现的，这个滤镜能够给元素或图片的非通明区域增加投影。

可能会有小伙伴要问了，他与 box-shadow 有什么区别，间接看成果：

通过成果能够很显著的看出区别，box-shadow 是对 box 进行投影，而 drop-shadow 是对内容进行投影，只有有内容的中央才会产生投影，这更合乎咱们现实生活中的景象。

它的参数模式为：drop-shadow(h-shadow v-shadow blur spread color)，与 boxshadow 参数的惟一区别就是无奈指定为内投影。

投影变色

有了下面的理解后，当初加大在程度方向的投影间隔，不设置暗影大小和色彩：

img {animation: move 3s linear forwards;}
@keyframes move {
    0% {filter: drop-shadow(0 0 #000);
    }
    100% {filter: drop-shadow(150px 0 #000);
    }
}

暗藏原图标 ：将原图标程度向左挪动本身的 100%，图标外层的 div 设置 overflow:hide，这样投影影子就替换了原图标的地位：

<div class="img-wrapper">
    ![](./icon.png)
</div>

.img-wrapper {
    display: inline-block;
    border: 1px solid #ccc;
}
.img {transform: translateX(-100%);
    filter: drop-shadow(120px 0 #000);
}

为了演示整个过程，我这里没有设置超出暗藏：

当初你能够将图标改成任意色彩啦，不过这种形式有个局限性，只能变成纯色图标

要害知识点：

• 还有一点要留神，drop-shadow 不能像 box-shadow 一样设置多层暗影，否则无任何成果。

给文字投影

drop-shadow 不仅能够给图片投影，还能够给元素投影。

color: red;
font-size: 40px;
filter: drop-shadow(10px 10px 3px rgb(7, 7, 7));

构想一下，如果把文字色彩设置为通明色，那投影是否会隐没？

.text-wrapper {
    color: red;
    font-size: 40px;
    filter: drop-shadow(10px 10px 3px rgb(7, 7, 7));
    animation: changeColor 3s linear;
}
@keyframes changeColor {
    0% {color: red;}
    100% {color: transparent;}
}

答案是会隐没，这与咱们的事实相符，阳光是能够穿过通明的物体的，因而不会产生投影。

对 png 图标改色的用途还是挺实用的，那通过它还可不可以做出一些其余有意思的事件呢？

比如说做一个小游戏，看轮廓猜一猜。点 这里 在线体验

应用多滤镜变色

是不是认为这样就完结了，下面的变色计划实现起来还是比拟麻烦的，通过 css 的其余滤镜同样能够实现变色成果。

先从简略的开始，把一个图标变为彩色或红色：

.state1 {filter: brightness(0);
}
.state2 {
    background: #000;
    filter: brightness(100);
}

应用到的是 brightness 滤镜，给图片利用一种线性乘法，使其看起来更亮或更暗。如果值是 0%，图像会全黑。值是 100%，则图像会变亮。

如何变成其余色彩

CSS3 filter 还有很多其余的滤镜，如 hue-rotate(色相)、contrast(对比度)、saturate(饱和度) 等。

CSS3 容许咱们对对立元素同时利用多种滤镜，因而咱们应用下面的滤镜，通过调整不同的参数组合，总会失去咱们想要的色彩。

当然这个计算过程和原理是比较复杂的，我也没去钻研，张鑫旭老师做了一个在线转换器，只须要输出原始色（原图标色彩）和指标色（你想要变成的色彩），会主动帮咱们生成滤镜代码：

来看下应用滤镜的变动过程：

.png {animation: change 3s linear forwards;}
@keyframes change {
    0% {filter: none;}
    100% {filter: invert(52%) sepia(83%) saturate(839%) hue-rotate(78deg) brightness(111%) contrast(133%);
    }
}

这个在线转换器并不能保障每次都能够 100% 转换成指标色彩，它会存在肯定的误差，误差值在 2 以内就能够了，轻微的差异肉眼基本上辨别不进去的。

应用混合模式变色

应用 ackground-blend-mode 实现变色有两个要求：

• 图片内容局部必须是纯彩色的
• 其余部分必须是红色的，不能是通明色

![](./state.jpg)
<span class="colorful"></span>

.colorful  {
    display: inline-block;
    width: 120px; height: 120px;
    background-image: url(./state.jpg), linear-gradient(#f4615c, #f4615c);
    background-blend-mode: lighten;
    background-size: 100%;
}

成果如下：

原理 ：

​ 将图片和指标色作为背景，应用 lighten(变量) 混合模式，红色与任何颜色混合都为红色，彩色与任何指标色混合后都为指标色。

​ 这里的指标是之所以要应用线性突变 linear-gradient(#f4615c, #f4615c) 的形式示意，而不间接应用 #f4615c , 能够看下我之前的这篇文章《 奇思妙想 CSS 之“百变背景”》，你将会晓得答案。

background-blend-mode 的支持性还是很好的（IE 不是浏览器）

总结

​ 当初大多数状况下都是应用 svg 格局的图标，解决变色很不便。如果你用的是 png 图标，当有变色需要时就能够利用下面的办法，用户自定义主题时，也能够将图标色彩的配置权交给用户，做的真正的自定义主题。

最初，可通过公众号【前端筱园】，回复“ 图标变色 ”获取本期示例全副源码；