重点：使用background-blend-mode 实现图片任意颜色赋色技
代码示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.colorful {
display: inline-block;
width: 50px; height: 50px;
background-image: url(encryptionIcon.png), linear-gradient(#000088, #000088);
background-blend-mode: lighten;
background-size: 100%;
}
</style>
</head>
<body>
<h4>原图</h4>
<p><img src="encryptionIcon.png"></p>
<h4>变成指定红色<span style="color:#f4615c;">#f4615c</span></h4>
<p>红色：<span class="colorful"></span></p>
</body>
</html>
参考：https://www.zhangxinxu.com/wordpress/2018/11/css-change-icon-color/
踩坑：
1、当底色是透明的时候，会被混合模式混合上叠加层的颜色，无法使用。所以，这个技术也就存在了一个使用前提：图片的底色为白色，主色为黑色
2、图片的底色为白色，主色为黑色的前提下，处理出来的图片背景颜色还是白色，无法改变，背景白色可能局限了这个技巧的使用场景
网友评论