最近遇到了需要使用CSS让background背景图标的变色的需求场景，使用背景混合模式实现的，可能大家以后也用得到，所以分享下。
文章关键字 ‘mask’
CSS background背景图标的变色技巧
2022年01月31日，星期一密码强度效果最佳实现一定是HTML meter元素
2021年11月14日，星期日
介绍一种全新的clipPath Sprites小图标技术
2020年10月30日，星期五
本文介绍一种全新的SVG图标合集技术，有别于传统的<symbol>元素，这里使用的是<clipPath>元素，配合CSS clip-path属性使用，优势在于HTML标签任意，UI样式任意，本文内容一定会对您的学习有所帮助。
巧用CSS cross-fade()实现背景图像半透明效果
2020年07月6日，星期一
借助CSS mask遮罩显著优化PNG图片的尺寸
2020年05月8日，星期五
带有透明区域，同时色彩丰富的PNG图片再怎么压缩体积也是很大的，有没有什么办法既保持PNG图片的透明，又显著降低图片的尺寸呢？本文就将介绍如何使用CSS遮罩降低超过50%大小的PNG体积，优化性能。
第五届CSS大会主题分享之CSS创意与视觉表现
2019年06月9日，星期日
第五届CSS大会主题分享之“CSS创意与视觉表现”文字版完全整理，共有10个纯CSS实现的创意案例，旨在展现CSS的潜力，同时激发你的CSS创意思维。每个案例都有demo，原理讲解，文末还有分享文档，希望对你CSS学习有所帮助。
你用的那些CSS转场动画可以换一换了
2019年05月27日，星期一
写给自己看的CSS shapes布局教程
2019年02月2日，星期六
本文详细介绍CSS Shapes布局，兼容性不错，移动端项目和中后台项目都可以使用，可以实现很多很棒的布局效果，需要和浮动配合使用。不仅支持基础图形，还支持PNG，SVG图像，以及渐变图形的环绕效果。是非常值得学习的一种布局方式。
纯CSS实现任意格式图标变色的研究
2018年11月24日，星期六
想要使用CSS改变PNG小图标的颜色，似乎不太可能。但，实际上，我们可以有多种方法改变PNG小图标，SVG小图标的颜色，并且是任意的色值，可以是作为背景图片的图标，也可以是内联的图标。究竟如何CSS改变图标的颜色呢？不妨点进去围观一番。
3种纯CSS实现中间镂空的12色彩虹渐变圆环方法
2017年11月7日，星期二上周我做了个demo，使用SVG实现了一个彩条圆环倒计时效果，使用SVG实现的优点是兼容性非常好，不足在于学习成本比较高，于是我就琢磨有没有更简单的方法实现类似的多彩圆环渐变效果，最好纯CSS就能搞定。绞尽脑汁想出了下面三种实现方法……
我的应用
我的应用