CSS：改变 icon 的颜色

利用 CSS 的 background-blend-mode: lighten 就可以轻松改变图片的颜色。

利用 background-blend-mode ，我们可以在图片下叠加多一层其他颜色。
通过 background-blend-mode: lighten 这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。

⚠️ 使用前提条件：图片内容为黑色纯色，图片背景为白色。

• 如果图片内容为白色，背景为黑色，可以用 background-blend-mode: darken；
• 如果图片背景为透明，很抱歉，此办法暂时不行，需要利用 drop-shadow。

• 参考：https://www.cnblogs.com/coco1s/p/8080211.html

• 代码：

  .pic {
    width: 200px。
    height: 200px;
    background-image: url("heart.jpg");
    background-size: cover;
  }
  
  .pic1 {
    background-image: url("heart.jpg"), linear-gradient(rgb(238, 114, 114), rgb(209, 11, 11));
    background-blend-mode: lighten;
    background-size: cover;
    }
  

  <div class="pic"></div>
  <div class="pic pic1"></div>
  

  • linear-gradient 线性渐变。 ????详情

  • lighten 一种混合模式，变亮。

    黑色比任何颜色都要暗，所以黑色会被任何色替换掉。
    反之，如果素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式。

• 效果图：

  

• 扩展：

  可以利用 currentColor 这个 CSS 的变量实现 icon 颜色和文字一同变化。 ????

  • 关于 currentColor 的干货