纯css修改图标颜色的五种方式

原图

我们以目标色红色为例，逐一看是如何实现的

利用filter属性进行修改

1、filter：drop-shadow + transform 移位变色

  <div class="img-wrapper-1">
    <img src="./demo.png" class="icon">
  </div>
<style>
    .img-wrapper-1 {
      overflow: hidden;
    }

    .img-wrapper-1 img {
      transform: translateY(-100%);
      filter: drop-shadow(0 24px #f00);
    }
</style>

2、filter 综合invert， sepia， saturate，hue-rotate， brightness，contrast五大属性搭配实现变色

具体怎么转换，点这里张鑫旭filter颜色转换器

  <div class="img-wrapper-2">
    <img src="./demo.png" class="icon">
  </div>
  <style>
	.img-wrapper-2 img {
      filter: invert(21%) sepia(97%) saturate(7452%) hue-rotate(7deg) brightness(115%) contrast(127%);
    }
</style>

利用背景属性实现变色

3、使用混合模式（ackground-blend-mode）变色

背景转换，要求图标不能是透明色，背景最好是白色或者其他浅色系

<div class="img-wrapper-3"></div>
<style>
   .img-wrapper-3 {
      display: inline-block;
      width: 24px; 
      height: 24px;
      background-image: url(./demo-white.svg), linear-gradient(#f00, #f00);
      background-blend-mode: lighten;
      background-size: 100%;
    }
</style>

4、使用mask遮罩

<div class="img-wrapper-4"></div>
<style>
    .img-wrapper-4 {
      display: inline-block;
      width: 24px; height: 24px;
      background-color: #f00;
      -webkit-mask: url(./demo.svg) no-repeat;
      mask: url(./demo.png) no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }
 </style>

5、用svg图标，想怎么改怎么改,一个fill属性搞定

  <div class="img-wrapper-5">
    <img src="./demo.svg" class="icon">
  </div>

呈现效果：