CSS遮罩实现任意颜色图标

最新推荐文章于 2024-11-18 04:38:27 发布

occam-ysw

最新推荐文章于 2024-11-18 04:38:27 发布

阅读量843

点赞数

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

原文链接：https://www.zhangxinxu.com/wordpress/2018/11/css-change-icon-color/

版权

前端专栏收录该内容

1 篇文章

订阅专栏

如下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作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。