小图标换色，不需找UI啦

今日想找UI更新一下小图标的颜色，使得页面对比度更高，但是UI很忙，想老夫自称CSS大魔法师，就打算利用CSS解决这个问题。

这不是字体图标（字体图标直接设置color就完了），这是图片（PNG）。

利用css3 filter 滤镜属性
原理：使用了CSS3滤镜filter中的drop-shadow，drop-shadow滤镜可以给元素或图片非透明区域添加投影。
对于背景透明的png小图标而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图标了吗？

然后，我们把原始图标隐藏在容器外面，投影图标在容器中间，不见给人感觉是赋色效果了？

比方说本文的demo，如果把img父级加上width和overflow:hidden，子元素加上transform: translateX(-20px);原始的图标就不见了，只显示我们需要的阴影版小图标。

<div style="width: 20px;overflow: hidden;">
    <img src="images/icon/zxzxs.png" style="filter: drop-shadow(20px  0px  #FA4B28);transform: translateX(-20px);"/>
</div>

效果图：
之前

之后

中间过程 其实是这样的
这就是不给父元素加width和overflow: hidden的状态