CSS改变任意PNG格式图片颜色

🔺 一、眼见为实

CSS可以修改PNG透明图片的颜色，如图

代码如下

原理其实很简单，使用了CSS3滤镜filter中的drop-shadow，可以给元素或图片添加投影。关于filter特效可以查看CSS3 Filter的十种特效

filter: drop-shadow(x轴 y轴投影大小颜色);。FireFox浏览器可直接使用filter，但Chrome浏览器必需是-webkit-filter，使用的时候设置两个值如上面贴出来的代码那样

对于背景透明的png小图标而言，如果我们施加一个不带模糊的投影（将投影大小设为0），不就等同于生成了另外一个颜色的小图标了吗？

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

原理如上面，我一开始实现的时候，以为很简单，因为分分钟可以实现自己的想法，后来发现有些天真了，Chrome浏览器怎么都显示不出来；FireFox浏览器却可以！咦，究竟发生了什么。

在Chrome浏览器下，drop-shadow有一个如下的呈现特性：

在Chrome浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。

所以，我试过：

通通不行，实现遇到了巨大的阻碍。

后来，灵光一现，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）？

于是，我就试了下曾经立下无数战功的透明边框，卧槽，又立功了，成了！

因此，下面这一个CSS声明是千万不能少的：

border-right: 20px solid transparent; //20px根据图标大小设定

IE13+支持，Chrome和FireFox浏览器支持，移动端iOS支持，Android4.4+支持。也就是，基本上，移动端现在可以使用这种技术了。

既节约了流量，也让我们的开发更简单，维护更方便了。

内容来于网络