CSS赋予同一图片不同颜色

• 问题背景

  • 有时候针对一张图片，我们可能需要这张图片的不同颜色的效果，其中一个显然的解决方案是，分别导出该图片的不同颜色，但显然这种方法需要多储存很多张相同的图片（只有颜色不同）。

• 解决方案

  • 想要将图片颜色保持为其背景颜色

    • 使用mix-blend-mode

      • mix-blend-mode描述了元素的内容应该与元素的父元素内容如何混合。

          mix-blend-mode: normal;         // 正常
          mix-blend-mode: multiply;       // 正片叠底
          mix-blend-mode: screen;         // 滤色
          mix-blend-mode: overlay;        // 叠加
          mix-blend-mode: darken;         // 变暗
          mix-blend-mode: lighten;        // 变亮
          mix-blend-mode: color-dodge;    // 颜色减淡
          mix-blend-mode: color-burn;     // 颜色加深
          mix-blend-mode: hard-light;     // 强光
          mix-blend-mode: soft-light;     // 柔光
          mix-blend-mode: difference;     // 差值
          mix-blend-mode: exclusion;      // 排除
          mix-blend-mode: hue;            // 色相
          mix-blend-mode: saturation;     // 饱和度
          mix-blend-mode: color;          // 颜色
          mix-blend-mode: luminosity;     // 亮度
          
          mix-blend-mode: initial;
          mix-blend-mode: inherit;
          mix-blend-mode: unset;