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>