2行CSS 代码实现图片任意颜色赋色技术

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

使用 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),