css filter改变图片的颜色，神奇的操作~

最新推荐文章于 2024-07-25 14:15:14 发布

Connie_豆

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量8k

点赞数 2

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/lvdou1120101985/article/details/110880226

版权

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何利用CSS的filter属性，特别是drop-shadow滤镜，来为透明背景的图标添加颜色投影，实现不同场景下颜色变化的效果。此外，还提到了其他filter属性的应用，并链接了一篇关于如何通过矩阵计算改变SVG颜色的文章。该方法适用于原图是黑白的情况，但有一定的局限性。

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

最近get了一个神奇的知识~

视觉设计的小姐姐某天有一个想法，她只设计一版图标，需要前端在不同的场景展示不同颜色的图标，确实是高效的办法哈！但是对我的CSS知识来说超纲了[捂脸]…于是开始搜搜搜，发现了一些办法，而且这些办法都是使用filter这个神奇的属性！

一、filter:drop-shadow

drop-shadow滤镜可以给元素或图片非透明区域添加投影，对于背景透明的icon来说，投影当然就可以实现改颜色啦！

html:

<div class="imgBox">
   <img src="xxxx" alt="" />
</div>

css:

.imgBox {
   width: 32px;
   height: 32px;
   overflow: hidden;
   img {
      width: 32px;
      height: 32px;
      transform: translateY(-32px);
      filter: drop-shadow(#EFE2DA0 0 32px);
   }
}

代码很简单：

1.filter: drop-shadow(投影颜色，x偏移量，y偏移量)；

这是filter: drop-shadow(#FF0000 0 32px)的效果，上面是原图，下面是投影

2.需要注意的就是需要设置容器overflow: hidden和元素本身transform: translateY(-64px)，只展示投影；

二、filter其他的属性

解决方案：https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/

这篇帖子里的最后一种方法对于想要实现图片变成指定颜色是比较适用的：

但是这个写法确实是不太容易理解原理，哈哈。不过文章中给出了工具可以计算出颜色代码对应的矩阵，还是很好用的！不过这个办法有一个限制，就是原图片必须是白色或者黑色的，工具计算出来的矩阵才能实现预期的颜色。