css改变图片颜色

利用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>复制

效果如下：

完结撒花