CSS 随意更改img或者background的图片颜色
随意更改众所周知,作为icon或者iconfont的图标,如果需要改变颜色,直接在hover里面写入color,换个颜色就行。但是img的这种标签或者作为一个容器的background-image,他的图片颜色如何更改呢这里是示例代码<img class="img" :src="XXXX.svg`" />.img{width: 16px;height: 16px;transform:
·
随意更改
众所周知,作为icon或者iconfont的图标,如果需要改变颜色,直接在hover里面写入color,换个颜色就行。
但是img的这种标签或者作为一个容器的background-image,他的图片颜色如何更改呢
这里是示例代码
<img class="img" :src="XXXX.svg`" />
.img{
width: 16px;
height: 16px;
transform: translateY(-60px);
filter: drop-shadow(#333333 0 60px) //颜色、x轴偏移量、y轴偏移量,这里的颜色就是你要指定的颜色,不管原来的图片是什么颜色,都会变成这个颜色
}
原理就是
img先向y轴负方向偏移60px,让你看不到他,然后经过滤镜处理颜色的“新”图片再向y轴正方向偏移60px,又让他穿着新衣服变回来
更多推荐
已为社区贡献2条内容
所有评论(0)