CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色作为背景色，然后原始图标作为遮罩图片，效果就出来了。
话不多说，直接上代码~~~
<style>
.icon {
display: block;
width: 60px;
height: 60px;
-webkit-mask: url(https://static.tojoyshop.com/images/wxapp-boss/icon-favorite-1.svg) no-repeat;
/* 一定要带 -webkit- 属性哦~ */
}
.icon1 {
background: linear-gradient(#f00, #0f0, #00f);
}
.icon2 {
background: #f00;
}
</style>
<div class="icon"></div>
<div class="icon icon1"></div>
<div class="icon icon2"></div>
icon
icon1
icon2
网友评论