&nbs p;
补充于2018-11-26
有多个比本文更好的实现方法，请参考这篇文章：“纯 CSS 实现小图标变色的一些研究”。
一、眼见为实
CSS可以修改图片的颜色，没错，可以，眼见为实！您可以狠狠地点击这里：png小图标CSS赋色demo
上面的不是很黑的是原始图标，是个 png图片 ，下面这个是可以赋色的：
下面，我们随意选择一个颜色，例如紫色，然后：
是不是感觉很厉害！以后设计师就不需要在提供几套颜色的图片了。
SVG, icon fonts等技 术 似乎也不是那么耀眼了。
二、原理其实很 简单
原理其实很简单，使用了CSS3滤镜 filter 中的 drop -s hadow ， drop-shadow 滤镜可以给元素或图片非透明区域添加投影。
如果对 drop-shadow 不是很 了解 ，建议先看看前些时间写的“CSS3 filter:drop-shadow滤镜与box-shadow区别应用”一文！
对于 背景透明 的png小图标而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图标了吗？
然后，我们把原始图标隐藏在容器外面，投影图标在容器中间，不见给人感觉是赋色效果了？
比方说本文的demo，如果把icon父级的的 overflow:hidden 去掉，原始的图标就暴露出来啦！
三、实现的时候实际有难度
原理如上面，我一 开始 实现的时候，以为很简单，因为分分钟可以实现自己的想法，后来发现有些天真了，Ch rom e浏览器怎么都显示不出来；FireFox浏览器却可以！咦，究竟发生了什么。
在C hr ome浏览器下， drop-shadow 有一个如下的呈现特性：
在Chrome浏览器下，如果一个元素的 主体 部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。
所以，我试过：
text -i ndent负值隐藏原始图，无投影，失败！ clip剪裁隐藏，无投影，失败！ m arg in负值隐藏原始图，无投影，失败！ left负值隐藏原始图，无投影，失败！通通不行，实现遇到了巨大的阻碍。
后来，灵光一现，如果我实体部分也在可视区域内，但是是透明的，会 怎样 呢（反正不会有投影出来）？
于是，我就试了下曾经立下无数战功的透明边框，卧槽，又立功了，成了！
因此，下面这一个CSS声明是千万不能少的：
border-right: 20px solid transparent;
四、关于兼容性
IE13+支持，Chrome和FireFox浏览器支持，移动端iOS支持，And ROI d4.4+支持。也就是，基本上，移动端现在可以使用这种技术了。
既节约了流量，也让我们的开发更简单，维护更方便了。
五、结语碎碎念
其实，本文的技术发明（主要是透明border的处理）在“drop-shadow vs box-shaow”这篇 文章 完成后就研究出来了。本来想写个小专利，蹭点早饭钱。结果，新厂子写专利没费用，而且周期要3年。
3年我 儿子 都可以打酱油了。所以，罢了，直接分享出来。
今天8号，本月已经6篇文章了，写文章暴走了下。就是为了腾出大段且连续的 业余 时间，要秘密进行其他大项目。
时光机
如果你是3~5年之后看到此文，而且你是2016年上 大学 的，那么，我在写这篇文章的时候，你可能正在翻来覆去睡不着，还在焦虑 明天 的考试。总之，不要担心，我给大家找了一个非常硬的后台，保证 你们 这次 高考 无忧，放心睡觉吧！哟，你在好奇是哪个后台。嘻嘻嘻嘻，说出来怕吓着你————观音菩萨！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-PNG格式小图标的CSS任意颜色赋色技术 全部内容，希望文章能够帮你解决 html5教程-PNG格式小图标的CSS任意颜色赋色技术 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-PNG格式小图标的CSS任意颜色赋色技术的详细内容...