css 实现 png 更改颜色

方案①

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

方案②

使用 css 中的  filter  属性

<div class="aaa">
   <div
      v-for="item in 10"
      :key="item"
      class="b"
      :style="`background:${getRgb()}`"
    ></div>
    <img src="../../assets/icon/cart_list.png">
</div>


.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 属性, 实现效果

 <div class="icon-box"> </div>


.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 , 十分完美


以下是代码

<template>
  <!-- -webkit-mask-image 兼容市面上大部分瀏覽器 -->
  <!-- mask-image 兼容火狐瀏覽器 -->
  <div
    class="icon-box"
    :style="`-webkit-mask-image: url(${src});mask-image: url(${src});width:${width};height:${height};background:${color};`"
  >
  </div>
</template>

<script>
export default {
  name: "self-icon",
  props: {
    // 圖片地址
    src: {
      default () {
        return '';
      }
    },
    // 容器寬
    width: {
      default () {
        return '14px';
      }
    },
    // 容器高
    height: {
      default () {
        return '14px';
      }
    },
    // 填充色
    color: {
      default () {
        return 'var(--themeColor)' // 默认主题色
      }
    }
  }
}
</script>

<style lang="less" scoped>
.icon-box {
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}
</style>