css3滤镜使img小图标变色

img小图标变色

之前在做项目时遇到过鼠标悬浮时图标变色的需求，因为用到的是图片不能直接改变颜色。这里就分享一个通过css3的滤镜达到变色的效果。

html代码

<div>
    <img src="images/wei.png" alt="">
</div>

css代码

div{
    width:20px;
    height:20px;
    overflow：hidden;
}
div:hover img{
    transform: translateY(-20px);
    filter: drop-shadow(#fff 0 20px);
    //颜色、x轴偏移量、y轴偏移量
}

• 代码很简单，思路就是在img外面包层div，在hover时把img原图移出div隐藏掉，然后把滤镜过的颜色放到原来的位置，从而达到换色的目的。
• filter 的参数有五个，x、y轴偏移量、阴影模糊度、阴影范围和阴影颜色，其中x、y轴偏移量是必填的。
• 兼容性：IE13+ 支持，Chrome 和 FireFox 浏览器支持，移动端 ios 支持，Android 4.4+ 支持。