html让图标变色,纯CSS实现任意格式图标变色的研究

重点：使用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、图片的底色为白色，主色为黑色的前提下，处理出来的图片背景颜色还是白色，无法改变，背景白色可能局限了这个技巧的使用场景