两行 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 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2762
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5327
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2645
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2577
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25310
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4025
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6828
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3145

扫码关注云+社区