如何通过纯CSS技术实现任意图片任意颜色着色技术？使用background-blend-mode:lighten实现任意图片着色技术假设我们有这样一张图片，JPG、PNG、GIF都可以，但是有一个前提，就是黑色纯色，背景白色：使用background-blend-mode，我们可以在图片下再叠加一层其他颜色，通过background-blend-mode:lighten混合模式，将图片的主色调从黑色变为其他颜色。简单的CSS代码如下：.pic{width:200px;高度：200px；背景图片：url($img)；background-size:cover;}.pic1{background-image:url($img),linear-gradient(#f00,#f00);背景混合模式：变亮；background-size:cover;}注意上面的CSS语句是关键background-image:url($img),linear-gradient(#f00,#f00);，这里我叠加了一层渐变层linear-gradient(#f00,#f00)来实现纯红色背景，而不是直接使用#f00来实现红色背景。使用background-blend-mode:lighten将主色更改为渐变色。这种方法更强大，因为它不仅可以将纯色图片从一种颜色变为另一种颜色，还可以将图片的黑色部分从单一颜色变为另一种颜色。颜色，换成渐变色！简单的CSS代码如下：.pic{background-image:url($img),linear-gradient(#f00,#00f);背景混合模式：变亮；background-size:cover;}可以得到这样的效果：OK，看到这里大家肯定会有疑惑，这是怎么实现的？这里有必要解释一下lighten混合模式。Lighten，lighten模式与darken模式的效果相反：1.与黑色合成图像时没有效果，使用白色时仍然是白色2.黑色比任何颜色都暗，所以黑色会被任何颜色代替颜色。反之，如果材质的底色为黑色，则主色为白色。那么应该使用darken（变暗）混合模式html
