本文节选自 "纯 CSS 实现任意格式图标变色的研究" 一文.
原图标如下, 是个蓝色的:
下面要变成 #f4615c 红色的图标, 最简单的方法就是使用遮罩.
如下 html 和 CSS 代码:
- <span class="colorful"></span >
- .colorful {
- display: inline-block;
- width: 32px; height: 32px;
- background-color: #f4615c;
- -webkit-mask: url(./xin.svg) no-repeat;
- mask: url(./xin.svg) no-repeat;
- -webkit-mask-size: 100% 100%;
- mask-size: 100% 100%;
}
CSS3 mask 默认是基于透明度实现遮罩效果的. 也就是实色区域显示, 透明区域隐藏. 因此, 我们只需要把目标图标颜色 #f4615c 作为背景色, 然后原始图标 (无论什么颜色都可以) 作为遮罩图片, 效果就出来了.
眼见为实, 您可以狠狠地点击这里: CSS mask 遮罩实现任意颜色的小图标 demo
效果如下截图:
CSS3 遮罩非常好用, 熟练掌握事半功倍, 其知识点很多, 包含的属性值也很多, 有兴趣可以参考我之前的文章:"CSS 遮罩 CSS3 mask/masks 详细介绍", 非常系统的介绍了相关知识点.
来源: https://juejin.im/post/5c03df3de51d45489f05b004