纯CSS给PNG图标变色
本文参考文章：http://www.zhangxinxu.com/wordpress/?p=5429
←这样一个图标，我们可以使用纯CSS将他变成任意颜色
那么原理是怎样呢？实际上是利用了CSS3滤镜中的投影。我们先看源码
HTML部分非常简单
<div class="outer">
<div class="icon"></div>
</div>
CSS部分：
.icon{
background:url(图片URL) no-repeat center;
width:20px;
height:20px;
position:absolute;
left:0px;
top:0px;
border-left:20px transparent solid;
-webkit-filter:drop-shadow(red -20px 0);
filter:drop-shadow(red -20px 0);
}
.outer{
width:20px;
height:20px;
position:relative;
overflow:hidden;
}
可以看到，实际上最关键的地方在于：
position:absolute;
left:0px;
top:0px;
border-left:20px transparent solid;
-webkit-filter:drop-shadow(red -20px 0);
filter:drop-shadow(red -20px 0);
前三行，意思即为绝对定位，加上第四行以后效果就是让.icon在正常区域内不可见了。然后第五第六行只是CSS-HAWK，都是使用filter，将原来的div向左投影，同时投影的颜色为红色。这样的话，只要把原来的div用overflow隐藏，那么看上去就像是图标变色了一样。
但是有人会问了，加这个border有什么意义呢？实际上是这样的，如果不加border就进行测试的话，会发现在FF下正常，但是在webkit内核中就无法显示。原因在于，webkit内核规定如果原div不可见，那么投影也不可见。而加了border以后，原div就可以“可见”了，只不过可见部分只是一个隐藏的border而已，这样的话，他的投影也就同时可见了。