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

好久以前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术，当时惊为天人，感慨还能够这样玩，私底下也曾屡次想过有没有其余方法能够实现，又或者不只仅局限于 PNG 图片。

  

mix-blend-mode 与 background-blend-mode

mix-blend-mode 在我以前的一篇文章初略介绍过 -- 难以想象的混合模式 mix-blend-mode，与本文的主角 background-blend-mode 同样，都是实现混合模式的。

混合模式最多见于 photoshop 中，是 PS 中十分强大的功能之一。固然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合获得一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制做出一些效果则须要对混合模式很深的理解及不断的尝试。

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

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

background-blend-mode 的可用取值与 mix-blend-mode同样，不重复介绍，下面直接进入应用阶段。

 

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

OK，下面进入正文。如何经过纯 CSS 技术实现任意图片的任意颜色赋色技术呢？

假设咱们有这样一张图片，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 实现红色背景。

 

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

这个方法更厉害的地方在于，不仅仅能够将纯色图片由一种颜色改成另外一种颜色，并且能够将图片内的黑色部分由单色，改成渐变颜色！

简单的 CSS 代码以下：

.pic {
    background-image: url($img), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
    background-size: cover;
}

能够获得这样的效果：

OK，看到这里，你们伙确定会有疑问了，这是怎么实现的呢？

这里就有必要解释一下 lighten 这个混合模式了。变亮，变亮模式与变暗模式产生的效果相反：

1. 用黑色合成图像时无做用，用白色时则仍为白色
2. 黑色比任何颜色都要暗，因此黑色会被任何色替换掉。反之，若是素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式

CodePen Demo -- 纯色图片赋色技术尝试

 

 

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

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

假设咱们有一张这样的 PNG 图片（灰色主色，透明底色）：

按照上面的方式实现一遍，结果以下：

任意颜色赋色技术尝试 -- PNG图片

很遗憾，当底色是透明的时候，会被混合模式混合上叠加层的颜色，没法使用。全部，这个技术也就存在了一个使用前提：

• 图片的底色为白色，主色为黑色

固然主色也能够是其余颜色，只是这个时候叠加须要考虑颜色的融合，没有使用黑色直观。

 

background-blend-mode 实现图片任意颜色赋色技术总结

综上，咱们确实只须要两行代码就能够实现白色底色黑色主色图片的任意颜色赋色技术。

{
    background-image: url($img), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
}

其中，background-image 的第二值就是你但愿赋值给的渐变色（固然，渐变色能够生成纯色）。

咱们同时给一个标签设置了背景图片和渐变色，而后利用了 background-blend-mode:lighten 这个关键属性，达到了相似 PS 里的混合模式效果。

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

那么由此方法自己能够想到，一些能对图形进行色彩调整的 CSS 属性是否也能达到一样的功能呢？诸如：

• filter 滤镜
• mask-image
• mask-clip

感兴趣的读者能够自行尝试，在接下来的文章我也会继续进行探讨。

黑色纯色，背景白色可能局限了这个技巧的使用场景，可是在不少白色底色的页面中，这个方法仍是能够很好的发挥做用，许多 ICON 图片再也不须要两个或者更多个颜色的版本！

 

background-blend-mode 兼容性

相较于 mix-blend-mode，background-blend-mode 的兼容性会更好一点。因此本文所介绍的技术在移动端是存在用武之地的：

 

最后

固然，background-blend-mode 自己还能够实现其余更多酷炫的效果，将在下一篇文章 难以想象的混合模式 mix-blend-mode（二） 分享给你们，敬请期待。

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

好了，本文到此结束，但愿对你有帮助 :)

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。