png图标(png图标图片)

CSS可以修改图片的颜色，没错，可以，眼见为实！上面的不是很黑的是原始图标，是个PNG图片，下面这个是可以赋色的

（点击上方公众号，可快速关注）作者：张鑫旭（@张鑫旭）链接：http://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/

一、眼见为实CSS可以修改图片的颜色，没错，可以，眼见为实！您可以狠狠地点击这里：png小图标CSS赋色demo（http://www.zhangxinxu.com/study/201606/png-icon-color-fill.html）

上面的不是很黑的是原始图标，是个PNG图片，下面这个是可以赋色的：

下面，我们随意选择一个颜色，例如紫色，然后：

是不是感觉很厉害！以后设计师就不需要在提供几套颜色的图片了SVG, icon fonts等技术似乎也不是那么耀眼了二、原理其实很简单原理其实很简单，使用了CSS3滤镜filter中的drop-shadow，drop-shadow滤镜可以给元素或图片非透明区域添加投影。

如果对drop-shadow不是很了解，建议先看看前些时间写的“CSS3 filter:drop-shadow滤镜与box-shadow区别应用”一文！对于背景透明的png小图标而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图标了吗？

然后，我们把原始图标隐藏在容器外面，投影图标在容器中间，不见给人感觉是赋色效果了？比方说本文的demo，如果把icon父级的的overflow:hidden去掉，原始的图标就暴露出来啦！

三、实现的时候实际有难度原理如上面，我一开始实现的时候，以为很简单，因为分分钟可以实现自己的想法，后来发现有些天真了，Chrome浏览器怎么都显示不出来；FireFox浏览器却可以！咦，究竟发生了什么在Chrome浏览器下，drop-shadow有一个如下的呈现特性：

在Chrome浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见所以，我试过：text-indent负值隐藏原始图，无投影，失败！。

clip剪裁隐藏，无投影，失败！margin负值隐藏原始图，无投影，失败！left负值隐藏原始图，无投影，失败！通通不行，实现遇到了巨大的阻碍后来，灵光一现，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）？。

于是，我就试了下曾经立下无数战功的透明边框，卧槽，又立功了，成了！因此，下面这一个CSS声明是千万不能少的：border-right: 20px solid transparent;四、关于兼容性IE13+支持，Chrome和FireFox浏览器支持，移动端iOS支持，Android4.4+支持。

也就是，基本上，移动端现在可以使用这种技术了既节约了流量，也让我们的开发更简单，维护更方便了五、结语碎碎念其实，本文的技术发明（主要是透明border的处理）在“drop-shadow vs box-shaow”这篇文章完成后就研究出来了。

本来想写个小专利，蹭点早饭钱结果，新厂子写专利没费用，而且周期要3年3年我儿子都可以打酱油了。所以，罢了，直接分享出来。【今日微信公号推荐↓】

更多推荐请看《值得关注的技术和设计公众号》其中推荐了包括技术、设计、极客 和 IT相亲相关的热门公众号技术涵盖：Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。

点击《值得关注的技术和设计公众号》，发现精彩！