最近在开发一个网站时，有许多的图标需要排版，图标大小形状是一样的就是颜色不一样，最常规的办法就是需要切N张图片，来实现。但是那样效率太低了，并且要弄好多图片，于是从寻找更好的解决办法。终于找到了，通过css的filter属性来制作。下面是我总结的代码

.icon{ width:39px; margin:0 auto; position:relative; overflow:hidden;}
.icon img{ display:block; margin:0 auto; position:relative; filter: drop-shadow(39px 0 #289c8a); -webkit-filter: drop-shadow(39px 0 #289c8a);}
.icon:hover img{transform: translate(-39px, 0);-webkit-transform: translate(-39px, 0);-ms-transform: translate(-39px, 0);-o-transform: translate(-39px, 0);}

实现的效果图如下：

这个移上去显示红色的图标就是实现的效果，可以换成任何颜色（纯色）。