css修改图片颜色方案

一、投影变色

这里使用的是CSS3滤镜 filter 中的 drop-shadow 实现的，这个滤镜可以给元素或图片的非透明区域添加投影。

drop-shadow和box-shadow的区别

box-shadow是对容器进行投影 drop-shadow是对内容进行投影

它的参数形式为：drop-shadow(h-shadow v-shadow blur spread color)，与 boxshadow 参数的唯一区别就是无法指定为内投影。

如何操作

原理：加大在水平方向的投影距离，不设置阴影大小和颜色，隐藏原图标

<div class="img-wrapper">
    <img class="img" src="./icon.png" alt="">
</div>

.img-wrapper {
    display: inline-block;
    border: 1px solid #ccc;
}
.img {
    transform: translateX(-100%);
    filter: drop-shadow(120px 0 #000);
}

掘金原文 (opens new window)