实现给图片赋色，首先要了解两个属性：mix-blend-mode 与 background-blend-mode；

简单区分一下这两个属性：

• mix-blend-mode 用于多个不同标签间的混合模式

• background-blend-mode 用于单个标签间内背景图与渐变背景间的混合模式。

background-blend-mode 的可用取值与 mix-blend-mode一样，不重复介绍。

使用 background-blend-mode: lighten 实现任意图片颜色赋色技术

如何通过纯 CSS 技术实现任意图片的任意颜色赋色技术呢？

假设我们有这样一张图片，JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色：

简单的 CSS 代码示意如下：

 .test1{
      width:200px;
      height:200px;
      background: url(img/qq.jpg); background-repeat: no-repeat;
 }

  .test2{
      width:200px;
      height:200px;
      background: url(img/mouse.jpg),linear-gradient(#f20a0a,#f20a0a); 
      background-blend-mode: lighten;
      background-repeat: no-repeat;
  }

效果如下：

注意，上面 CSS 这一句是关键 background-image: url(img/qq.jpg), linear-gradient(#f20a0a, #f20a0a); ，这里我叠加了一层渐变层 linear-gradient(#f20a0a, #f20a0a) ，实现了一个纯红色背景，而不是直接使用 #f20a0a实现红色背景。

使用 background-blend-mode: lighten 实现主色改为渐变色

这个方法更厉害的地方在于，不单单可以将纯色图片由一种颜色改为另一种颜色，而且可以将图片内的黑色部分由单色，改为渐变颜色！

  .test2{
      width:200px;
      height:200px;
      background: url(img/qq.jpg),linear-gradient(#f20a0a,#1a3cea); 
      background-blend-mode: lighten;
      background-repeat: no-repeat;
  }

lighten 混合模式：变亮，变亮模式与变暗模式产生的效果相反；

用黑色合成图像时无作用，用白色时则仍为白色。

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

局限性尝试 — 使用透明底色图片

上述方法要求了图片本身内容为纯色黑色，底色为白色。那么如果像 PNG 图片一样，只存在主色，而底色是透明的，是否能够同样实现效果呢？

结果从左到右依次是：原图，内容黑色底色透明赋色#f00，内容白色底色透明赋色#f00，内容白色底色透明赋色#f00-#2d3aed。

很遗憾，当底色是透明的时候，会被混合模式混合上叠加层的颜色，无法使用。所有，这个技术也就存在了一个使用前提：图片的底色为白色，主色为黑色。当然主色也可以是其他颜色，只是这个时候叠加需要考虑颜色的融合，没有使用黑色直观。

总结：

综上，我们确实只需要两行简单代码就可以实现白色底色黑色主色图片的任意颜色赋色技术。

  {
    background-image: url($img), linear-gradient($color1, $color2);
    background-blend-mode: lighten;
  }

我们同时给一个标签设置了背景图片和渐变色，然后利用了 background-blend-mode:lighten 这个关键属性。

看起来 background-blend-mode 名为混合模式，但似乎表现上更像是 PS 当中的一种的剪切蒙板，混合模式是修改图片本身，蒙版跟遮罩都是在图片上一层通过叠加其他层对图像进行调整。

可见，较近的Chrome以及FireFox浏览器都已经支持良好，而且无需使用私有前缀。