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

最新推荐文章于 2025-07-15 17:20:17 发布

原创最新推荐文章于 2025-07-15 17:20:17 发布 · 1.6w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

html 专栏收录该内容

17 篇文章

订阅专栏

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

随意更改

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