<style>.icon-color{ ???display: inline-block; ???width: 144px; ???height: 144px; ???????overflow: hidden;}.icon-color:after{ ???content: ‘‘; ???display: block; ???height: 100%; ???transform: translateX(-100%); ???background: url(‘https://user-gold-cdn.xitu.io/2018/7/31/164f0e6745afe2ba?w=144&h=144&f=png&s=2780‘) no-repeat center / cover; ???filter: drop-shadow(144px 0 0 #42b983);}</style><i class="icon-color"></i>使用 CSS3 滤镜 filter 中的 drop-shadow。
drop-shadow滤镜可以给元素或图片非透明区域添加投影- 将背景透明的 PNG 图标施加一个不带模糊的投影，就等同于生成了另外一个颜色的图标
- 再通过
overflow:hidden和位移处理将原图标隐藏
PNG 格式小图标的 CSS 任意颜色赋色技术
原文地址：https://www.cnblogs.com/jackjo/p/9449403.html