css 实现 png 更改颜色

方案①

让ui 抠图, 把需要该颜色的地方 挖空, 
其余部分白色, 然后通过css 上色就好 [ 不怕ui拿刀砍你, 可以这么试试 ]

方案②

使用 css 中的  filter  属性


   

    



.aaa {
  position: relative;
  .b {
    position: absolute;
    width: 50px;
    height: 50px;
    left: -100px;
    top: 50px;
    filter: drop-shadow(100px 0 0 red);
  }
}

 
安卓 和 window 上展示良好, 甚至很棒！
但是 ios 或者 mac 上, 就不忍直視了. 
ios 上只有当本体 在可视范围内 , 才能产生投影 

方案③

个人认为的, 最好方案

使用  mask-image 属性, 实现效果

 
 


.icon-box {
  -webkit-mask-image: url("../../assets/icon/minu.png");
  mask-image: url("../../assets/icon/minu.png");
  width:50px;
  height:50px;
  background:${color};
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

经过实测, 安卓 ok , ios ok , 十分完美


以下是代码