css动态切换png颜色

需求背景

需要模拟app webview实现标题栏，包含返回按钮，关闭按钮，分享按钮等，按钮颜色支持用户传入自定义；

实现

利用css filter属性的drop-shadow

具体代码实现

以react内实现为例

// jsx部分
      const { iconColor } = props;
      
      const IconStyle = {
        left: '-30px',
        filter: 'drop-shadow(30px 0px 0)',
        color: iconColor,
      }

      <div className="icon">
        <img src='./back.png' alt="" className="icon_" style={IconStyle} />
      </div>
      
// css部分
.icon {
    width: 60px;
    height: 60px;
    overflow: hidden;
}

.icon_ {
  width: 100%;
  border-right: 30px solid transparent;
  position: relative;
}

// 备注
IconStyle里之所以left和drop-shadow第一个值设置为30是因为图片宽度为60px，用的rem自适应换算下来是30px直接设置在style里

原理说明

兼容性

• 该方法存在一定的兼容性，但是移动端基本完全兼容，可以放心使用。利用png图，比svg更简单，它是利用了CSS3滤镜filter中的drop-shadow(drop-shadow滤镜可以给元素或图片非透明区域添加投影）。
• 用drop-shadow添加投影模糊度为0,再隐藏原图片。
• 备注说明：在Chrome浏览器下(低版本)，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。
• 使用这里使用border-right透明边框来解决兼容问题，如果不考虑Chrome低版本浏览器，可以不使用该属性(以上为例，不使用该属性需要将left值设置为负的30)。