CSS mask遮罩实现任意颜色的小图标实例页面

回到相关文章 »

效果:

原图

变成指定红色#f4615c

红色:

选择颜色:

代码:

CSS代码:
.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%;
}
HTML代码:
<h4>原图</h4>
<p><img src="./xin.svg"></p>
<h4>变成指定红色<span style="color:#f4615c;">#f4615c</span></h4>
<p>红色:<span class="colorful"></span></p>