两行 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-modebackground-blend-mode 的兼容性会更好一点。所以本文所介绍的技术在移动端是存在用武之地的:

最后

当然,background-blend-mode 本身还可以实现其他更多酷炫的效果,将在下一篇文章 不可思议的混合模式 mix-blend-mode(二) 分享给大家,敬请期待。

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

好了,本文到此结束,希望对你有帮助 :)

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏华章科技

天天做饼图,你烦不烦?老板都看腻了!

好象也没毛病,也挺好看的。但是....所有人的图表都是这样做,怎能突出你的图表个性?还可以更好看?看看下面的水滴图表:

922
来自专栏数据小魔方

图表美化教程|图案与形状填充

今天跟大家分享简单的信息图制作方法——形状/图案填充法。 ▽▼▽ 今天教大家简单的图表形状填充。 ●●●●● 首先是一个已经做好的柱形图。 ? 每天都看着这样的...

2906
来自专栏Fred Liang

移动端 Web 渲染解决方案

秋招 H5 移动端(面向微信)设计师出的落地页的动画层数有30层左右,在通过 bodymovin 导入前端页面中后再加载好素材之后仍有5秒左右黑屏渲染动画 目...

1574
来自专栏Coco的专栏

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

1242
来自专栏前端杂货铺

尽量使用translate而不是改变top/left进行动画(翻译)

前言     本文翻译自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/lef...

2864
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列 - Ink & Surface Dial

本篇作为技术分享系列的第四篇,详细讲一下手绘视频中 Surface Pen 和 Surface Dial 的使用场景。  先放一张微软官方商城的图,Surfac...

28812
来自专栏菜鸟前端工程师

html+css学习笔记004-元素选择器0背景属性

1015
来自专栏jojo的技术小屋

原 荐 CSS深入理解之border

2102
来自专栏大数据钻研

HTML5游戏前端开发【秘籍】

QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏,虽然还有很多不足,但其中使用的一些技术与技巧还是很有...

4017
来自专栏jojo的技术小屋

原 荐 CSS深入理解之border

作者:汪娇娇 时间:2017年10月20日 前段时间看过有关border比较好的视频,想着就写成博客给大家分享一下吧~ 说起border,想必大家都很熟悉,简单...

3004

扫码关注云+社区