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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。