利用CSS filter(滤镜) 属性 实现图片颜色改变
最近，在写前端页面的过程中，遇到一个场景，需要放一个logo图，但该图片会有多种颜色，但是服务器拿到的素材只有又一种颜色的logo（总不至于放多种颜色的相同图片，消耗服务器性能吧），于是就想如何利用css改变图片的颜色，发现了filter 属性
CSS filter(滤镜) 属性
地址如下：https://www.runoob.com/cssref/css3-pr-filter.html
该属性下有个drop-shadow，可以给图像设置一个阴影效果，可用到的参数有三个（x轴偏移量，y轴偏移量，颜色），其他参数该效果用不到！再结合css的transform就可以实现啦，上代码
初始如下：
html:
.box {
width: 40px;
height: 40px;
margin: auto;
}
.pic {
width: 40px;
height: 40px;
}
<div class="box">
<img class="pic" src="./员工管理.png" alt="">
</div>
图如下：
修改如下：
.box {
width: 40px;
height: 40px;
margin: auto;
/* 第三步 设置超出部分隐藏 */
overflow: hidden;
}
.pic {
width: 40px;
height: 40px;
/* 第一步 设置阴影 选好颜色蓝色 */
filter: drop-shadow(400px 0px #3296FA);
/* 第二步 设置偏移 把蓝色图放置原图位置 */
transform: translateX(-400px);
}
<div class="box">
<img class="pic" src="./员工管理.png" alt="">
</div>
效果如下：
