<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 滤镜可以给元素或图片非透明区域添加投影overflow:hidden 和位移处理将原图标隐藏原文：https://www.cnblogs.com/jackjo/p/9449403.html