css改变纯色图片颜色的几种方式

公司最近做个项目，碰上了用状态控制图片的展示，图片区别就在于颜色不同，为了网络性能优化，用css进行着色重复利用

方案一 filter: drop-shadow()

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
主要是靠制造阴影效果后进行移动加溢出后影藏

 <div class="icon-box">
      <img src="xxx.png" class="icon" />
 </div>

  <style>
.icon-box {
  margin-left: 100px;
  border: 1px solid red;
  overflow: hidden; //配合相对布局，将原图溢出容器并隐藏
  display: inline-block;
  // line-height: 12px;
  width: 30px;
  height: 30px;
  .ele_icon {
    width: 30px;
    height: 30px;
    margin-left: -30px;
    -webkit-filter: drop-shadow(30px 0 0 #ccc);
    filter: drop-shadow(30px 0 0 green);
  }
}
 </style>

方案2 svg格式改变fill

这种方式是直接在页面中使用svg标签 不能用img.src方法引入使用，因为img引入后不能改变颜色

内联方式

直接改style中的fill

<svg t="1653466467217" style="fill:red" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355" width="200" height="200"><path d="xxx"></path></svg>

定义class类名改变

<svg t="1653466467217" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355" width="200" height="200"><path d="xxx"></path></svg>


<style>
.icon1{
  fill: #f61f41;
}
 </style>

总结

还有方案就是使用background-blend-mode: lighten; 但这种方案有局限性，就是必须要图片白底黑色，用起来不方便，可参考看看他写的css着色方案

本人更加偏向于第一种方案，svg只能使用svg标签，代码中svg格式占据太多内容，看起来不简洁