当我们在做项目的时候，经常有许多个icon 图片两个或更多个颜色的版本，下面切图网教你，怎么用简单的css改变图片的颜色。
熟悉PS的人都应该知道混合模式，css3中也有两个与混合模式相关的属性，mix-blend-mode 和 background-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; // 还原
这些大致和ps中一致，除了最后三个。
background-blend-mode 这个是背景的混合模式。这个可以是背景图片间的混合，也可以是背景图片和背景颜色的混合。
现在我们使用 background-blend-mode: lighten 实现任意图片颜色赋色技术吧。
假设我们有这样一张图片，JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色：
利用background-blend-mode，我们可以在图片下叠加多一层其他颜色，通过background-blend-mode: lighten这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。简单的 CSS 代码示意如下：
.pic {
width: 200px;
height: 200px;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}
效果如下：
注意，上面
CSS 这一句是关键 background-image: url($img), linear-gradient(#f00,
#f00);，这里我叠加了一层渐变层linear-gradient(#f00, #f00)，实现了一个纯红色背景，而不是直接使用 #f00
实现红色背景。
现在解释一下lighten这个混合模式。变亮，变亮模式与变暗模式产生的效果相反：
1、 用黑色合成图像时无作用，用白色时则仍为白色。
2、 黑色比任何颜色都要暗，所以黑色会被任何色替换掉。反之，如果素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式。
兼容性
相较于 mix-blend-mode，background-blend-mode 的兼容性会更好一点。所以本文所介绍的技术在移动端是存在用武之地的：
