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

最新推荐文章于 2024-12-14 21:10:31 发布

有玉微凉，是为樱琅

最新推荐文章于 2024-12-14 21:10:31 发布

阅读量1.6w

点赞数 13

分类专栏： html 文章标签： css css3

本文链接：https://blog.csdn.net/Sakura1998gis/article/details/115326162

版权

html 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何使用CSS的filter属性来改变img标签和背景图（如SVG）的颜色。通过示例代码展示，在img标签中应用filter: drop-shadow滤镜，配合位置偏移，实现图标颜色的动态变换，为前端开发者提供了一种灵活调整图像颜色的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随意更改

众所周知，作为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轴偏移量,这里的颜色就是你要指定的颜色，不管原来的图片是什么颜色，都会变成这个颜色
}