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

重点:使用background-blend-mode 实现图片任意颜色赋色技

代码示例:




    
    
    
    Document
    



原图

变成指定红色#f4615c

红色:

参考:https://www.zhangxinxu.com/wordpress/2018/11/css-change-icon-color/

踩坑:

1、当底色是透明的时候,会被混合模式混合上叠加层的颜色,无法使用。所以,这个技术也就存在了一个使用前提:图片的底色为白色,主色为黑色

2、图片的底色为白色,主色为黑色的前提下,处理出来的图片背景颜色还是白色,无法改变,背景白色可能局限了这个技巧的使用场景

你可能感兴趣的:(纯CSS实现任意格式图标变色的研究)