css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。
方式一:利用css3滤镜filter中的 drop-shadow
代码如下:
<style> .icon{ display: inline-block; width: 180px; height: 180px; background: url('img/XXX.png') no-repeat center cover; overflow: hidden; } .icon:after{ content: ''; display: block; height: 100%; transform: translateX(-100%); background: inherit; filter: drop-shadow(144px 0 0 #fff); //需要修改的颜色值 } </style> <i class="icon"></i>
说明:
drop-shadow 滤镜可以给元素或图片非透明区域添加投影
将背景透明的 PNG 图标施加一个不带模糊的投影,就等同于生成了另外一个颜色的图标
再通过 overflow:hidden 和位移处理将原图标隐藏
mix-blend-mode 取值情况: