CSS background背景图标的变色技巧-工具盒子

封面图

三年前有写过关于小图标变色的文章，参见："纯CSS实现任意格式图标变色的研究"，这篇文章更多的是研究性质，而本文就属于结论，多年实践下来的经验分享。

一、最好方法是mask遮罩

小图标变色最好的方法一定是遮罩，兼容性好，适应性强（-webkit- 私有前缀略）。

.icon {
    color: deepskyblue;
    background-color: currentColor;
    mask: url(./icon.svg) no-repeat center / 100%;
}

此时通过改变图标的 color 颜色值，就能有变色效果了。

图标变色GIF示意

眼见为实，您可以狠狠地点击这里：CSS mask遮罩实现任意颜色的小图标demo

但是实际开发的时候，有时候小图标不能作为单独的元素使用（包括 CSS 伪元素），此时使用遮罩就有问题，例如有个 <input> 搜索框，里面有个图标：

搜索图标变色

此时使用遮罩就会有问题，因为会把边框一起遮罩掉（如果没有圆角，技术上是可以模拟的），那有没有什么办法不使用两个图标素材依然实现图标的变色效果呢？

二、背景混合模式技术

我目前探索出来可行的方法就是背景混合模式 background-blend-mode 属性。

实现的固定套路是这样的：

/* 变色的时候改变 --fill-color 的属性值 */
.element {
    --fill-color: gray;
    background: linear-gradient(var(--fill-color), var(--fill-color)), url(./icon.svg), #fff;
    /* 或者 lighten, normal; */
    background-blend-mode: screen, normal;
}

通过改变 CSS 自定义属性 --fill-color 的值就可以实现图标的变色了。

测试下来，如果 icon.svg 图标有很多半透明的边缘像素点，screen 混合模式效果更好，如果底色不是白色，而是很淡的灰色，则screen 混合效果会有些许误差，lighten 效果没有误差。

screen 这种混合模式表示滤色，在 Web 开发中还比较常用，相关介绍可以参见这篇文章"深入理解CSS mix-blend-mode滤色screen混合模式"。

一些限制