CSS 随意更改img或者background的图片颜色

随意更改

众所周知,作为icon或者iconfont的图标,如果需要改变颜色,直接在hover里面写入color,换个颜色就行。
但是img的这种标签或者作为一个容器的background-image,他的图片颜色如何更改呢

这里是示例代码

 
.img{
   width: 16px;
   height: 16px;
   transform: translateY(-60px);
   filter: drop-shadow(#333333 0 60px)  //颜色、x轴偏移量、y轴偏移量,这里的颜色就是你要指定的颜色,不管原来的图片是什么颜色,都会变成这个颜色
}

原理就是
img先向y轴负方向偏移60px,让你看不到他,然后经过滤镜处理颜色的“新”图片再向y轴正方向偏移60px,又让他穿着新衣服变回来

你可能感兴趣的:(html,css,css3)