本内容只要是对张鑫旭PNG格式小图标的CSS任意颜色赋色技术的这篇文章进行详细说明。
HTML：
<i class="icon"><i class="icon icon-del"></i></i>
CSS：
.icon{
display: inline-block;
width: 20px;
height: 20px;
overflow: hidden;
}
.icon-del{
background:url(delete.png) no-repeat center;
}
.icon>.icon{
position:relative;
left:-100%;
border-right: 20px solid transparent;
-webkit-filter: drop-shadow(blue 20px 0);
filter: drop-shadow(blue 20px 0);
}
效果：
当然还可以弄成其他颜色，只需要改变一下filter: drop-shadow(blue 20px 0); 里面的blue这个颜色。
这个原理就是利用filter过滤器的drop-shadow投影，也就是生成一个新的图标，然后我们给这个新图标添加颜色。
我们给父元素设置宽和高以及overflow:hidden，然后让这个子元素正常的图片left:100%让它隐藏，再通过border-right来设置一个宽度为图片宽度的transparent透明边框，最后给它加投影就好了。