重点:使用background-blend-mode 实现图片任意颜色赋色技
代码示例:
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Document.colorful {
display: inline-block;
width: 50px; height: 50px;
background-image: url(encryptionIcon.png), linear-gradient(#000088, #000088);
background-blend-mode: lighten;
background-size: 100%;
}
原图
变成指定红色#f4615c
红色:
踩坑:
1、当底色是透明的时候,会被混合模式混合上叠加层的颜色,无法使用。所以,这个技术也就存在了一个使用前提:图片的底色为白色,主色为黑色
2、图片的底色为白色,主色为黑色的前提下,处理出来的图片背景颜色还是白色,无法改变,背景白色可能局限了这个技巧的使用场景