纯css变换图片颜色png

众所周知，只有svg格式图片能改变颜色，png是不能改变的。最近也遇到这种问题了。开始解决办法就是找设计师要么再切一张图要么就搞个SVG给我。但是这都是求人搞，有没有办法自己就把换肤搞定。这个时候就用到了一个css3的一个新属性filter:drop-shadow

具体怎么使用不说了，直接上代码看效果

.icon-box{
    width: 16px;
    height: 18px;
    overflow: hidden;
    z-index: 1;
}
.red-img{
    display: inline-block;
    position: relative;
    left: -16px;
    border-right: 16px solid transparent;
    filter: drop-shadow(16px 0 #f1847f); 
}

思路简单，border-right和宽度一致，偏出和图片宽度一致的宽度。

利用阴影偏移，给阴影加样式。

这样我们其实看到的是图片的阴影，真实的图片被overflow：hidden了，所以给阴影变色就可以了