png图片制作任意颜色的小图标

本内容只要是对张鑫旭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透明边框，最后给它加投影就好了。