CSS 背景混合模式

混合模式

现代浏览器令人吃惊的是尽然支持和 PhotoShop 类似的图像混合模式,喜欢摄影或是熟悉 PhotoShop 的朋友应该对这个比较了解,我们先来普及一下什么是图像的混合模式。

要理解混合模式需要理解,图层、通道、RGB模式原理。

图层 比较好理解,就是我们的图像通过一层一层的叠加,最终形成我们所看到的图像,换句话说就是拆解图像到不同图层进行编辑。 通道 一般我们在 PhotoShop 中说通道通常指的是颜色通道和 alpha 通道。

颜色通道 颜色通道

上面显示的是 RGB 通道, 每个通道的像素都代表这种种颜色从 0~255 之间的一个值,三个通道叠加就会形成这个图像,而 alpha 通道是一个虚拟通道,比如我们可以创建一个选区来生成一个 alpha 通道。

alpha 通道 alpha 通道

RGB模式 RGB是光色三原色,通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

目前的显示器大都是采用了 RGB 颜色标准,在显示器上,是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的,目前的电脑一般都能显示32位颜色,有一千万种以上的颜色。如下图所示,假设三个灯都不开就是 0x000000 (黑色),只开红灯就是 0xff0000 (红色),三个灯都开就是 0xffffff (白色), rgb 三个值为等值的时候如 0x666666 是灰值(没有色相),RGB 模式称之为加色模式(相加成白色)。

RGB模式叠加示意图 RGB模式叠加示意图

CSS 中的混合模式是通过 background-blend-modemix-blend-mode 实现的。

background-blend-mode

在 CSS 盒模型中,元素的背景色在背景图片之下,边框在它们之上。或许你可以从名字猜出,background-blend-mode 将一个元素的背景色和图片混合在一起。当一个元素只有单一背景图片,background-blend-mode 控制背景图如何与它后面的背景颜色融合。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.flexbox .itembox{
    width: 160px;
    height: 100px;
    background: #f00;
    background-image: url(image1.png);
    background-size: cover;
}

.itembox.b2{
    background-blend-mode : lighten;
}

.itembox.b3{
    background-blend-mode : darken;
}

红色背景和图片混合示意图 红色背景和图片混合示意图

CSS 有 16 种混合模式 :

Photoshop图层CSS混合模式中文名称功能描述
normalnormal正常模式混合色的像素会透过所用的颜色显示出来
multiplymultiply正片叠底模式在“正片叠底”模式中,查看每个通道中的颜色信息,并将“基色”与“混合色”复合。
screenscreen滤色模式“滤色”模式与“正片叠底”模式正好相反,它将图像的“基色”颜色与“混合色”颜色结合起来产生比两种颜色都浅的第三种颜色
overlayoverlay叠加模式“叠加”模式把图像的“基色”颜色与“混合色”颜色相混合产生一种中间色。
darkendarken变暗模式在“变暗”模式中,查看每个通道中的颜色信息,并选择“基色”或“混合色”中较暗的颜色作为“结果色”。
lightenlighten变亮模式在“变亮”模式中,查看每个通道中的颜色信息,并选择“基色”或“混合色”中较亮的颜色作为“结果色”。
color-dodgecolor-dodge颜色减淡模式在“颜色减淡”模式中,查看每个通道中的颜色信息,并通过减小对比度使基色变亮以反映混合色。与黑色混合则不发生变化。
color-burncolor-burn颜色加深模式在“颜色加深”模式中,查看每个通道中的颜色信息,并通过增加对比度使基色变暗以反映混合色,如果与白色混合的话将不会产生变化。
hard-lighthard-light强光模式“强光”模式将产生一种强光照射的效果。如果“混合色”颜色“基色”颜色的像素更亮一些,那么“结果色”颜色将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”将更暗。
soft-lightsoft-light柔光模式柔光”模式会产生一种柔光照射的效果。如果“混合色”颜色比“基色颜色的像素更亮一些,那么“结果色”将更亮;如果“混合色”颜色比“基色”颜色的像素更暗一些,那么“结果色”颜色将更暗,使图像的亮度反差增大。
differencedifference差值模式在“差值”模式中,查看每个通道中的颜色信息,“差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值,如果结果为负,则取正值,产生反相效果。
exclusionexclusion排除模式“排除”模式与“差值”模式相似,但是具有高对比度和低饱和度的特点。比用“差值”模式获得的颜色要柔和、更明亮一些。
huehue色相模式“色相”模式只用“混合色”颜色的色相值进行着色,而使饱和度和亮度值保持不变。
saturationsaturation饱和度模式“饱和度”模式的作用方式与“色相”模式相似,它只用“混合色”颜色的饱和度值进行着色,而使色相值和亮度值保持不变。
colorcolor颜色模式“颜色”模式能够使用“混合色”颜色的饱和度值和色相值同时进行着色,而使“基色”颜色的亮度值保持不变。“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。
luminosityluminosity亮度模式“亮度”模式能够使用“混合色”颜色的亮度值进行着色,而保持“基色”颜色的饱和度和色相数值不变。其实就是用“基色”中的“色相”和“饱和度”以及“混合色”的亮度创建“结果色”。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.flexbox .itembox{
    width: 160px;
    height: 100px;
    background: #ffcd44;
    background-image: url(image1.png);
    background-size: cover;
}

.itembox.b1{
    background-blend-mode : multiply;
}

.itembox.b2{
    background-blend-mode : exclusion;
}

.itembox.b3{
    background-blend-mode : overlay;
}

.itembox.b4{
    background-blend-mode : saturation;
}

.itembox.b5{
    background-blend-mode : color-dodge;
}

CSS 图像混合模式示意图 CSS 图像混合模式示意图

混合模式的分类:

分类名称混合模式名称描述
基础混合模式normal利用图层透明度和不透明度来控制与下面的图层混合
降暗混合模式darken,multiply,color-burn减色模式,滤掉图像中高亮色,从而达到图像变暗
加亮混合模式screen,lighten,color-dodge加色模式,滤掉图像中暗色,从而达到图像变亮
融合混合模式overlay,soft-light,hard-light用于不同程度的对上、下两图层的融合
变异混合模式difference,exclusion,hard-light用于制作各种变异的图层混合
色彩叠加混合模式hue,saturation,color,luminosity根据图层的色相,饱和度等基本属性,完成图层融合

lighten(变亮), darken(变暗)

算法是 c = min(a, b) 逐通道进行运算

上面的示意图是图层的变暗和变量, 原理如下:

B: 颜色1 [0, 0.2, 0.4] 颜色2 [1, 0.8, 0.6]

A: [0.4, 0.6, 0.8]

C: 颜色1 [0, 0.2, 0.4] 颜色2 [0.4, 0.6, 0.6]

multiply(正片叠底)

算法是 c = a * b 逐通道进行运算

B: 颜色1 [0, 0.2, 0.4] 颜色2 [1, 0.8, 0.6]

A: [0.4, 0.6, 0.8]

C: 颜色1 [0, 0.12, 0.32] 颜色2 [0.4, 0.48, 0.48]

exclusion(排除)

算法是 c = a + b - 2ab 逐通道进行运算

overlay(叠加)

若 b <= 0.5: c = 2ab 若 b > 0.5: c = 1 - 2(1-a)(1-b)

color-dodge(颜色减淡)

算法是 c = b / (1−a) 逐通道进行运算

mix-blend-mode

使用 mix-blend-model 属性主要是用于源与背景颜色或背景图像混合。也就是说盒子内的元素和背景之间的叠加效果。

1
2
3
4
5
6
7
8
<section class="flexbox">
    <div><div class="itembox b0"><img src="image4.jpg" width="100%"/></div><span>正常模式</span></div>
    <div><div class="itembox b1"><img src="image4.jpg" width="100%"/></div><span>multiply模式</span></div>
    <div><div class="itembox b2"><img src="image4.jpg" width="100%"/></div><span>exclusion模式</span></div>
    <div><div class="itembox b3"><img src="image4.jpg" width="100%"/></div><span>overlay模式</span></div>
    <div><div class="itembox b4"><img src="image4.jpg" width="100%"/></div><span>saturation模式</span></div>
    <div><div class="itembox b5"><img src="image4.jpg" width="100%"/></div><span>color-dodge模式</span></div>
</section>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.flexbox .itembox{
    width: 160px;
    height: 100px;
    background: #ffcd44;
    background-image: url(image1.png);
    background-size: cover;
}

.itembox.b1 img{
    mix-blend-mode : multiply;
}

.itembox.b2 img{
    mix-blend-mode : exclusion;
}

.itembox.b3 img{
    mix-blend-mode : overlay;
}

.itembox.b4 img{
    mix-blend-mode : saturation;
}

.itembox.b5 img{
    mix-blend-mode : color-dodge;
}

注意上面代码的不同,叠加的是 div 内部的 img 图像。

mix-blend-mode源和背景叠加 mix-blend-mode源和背景叠加

混合使用

如果一个元素包含多个背景图片,我们可以将相同的混合模式分配给所有的元素:

1
2
3
4
.blend {
    background-image : url(blend-01.jpg), url(blend-02.jpg), url(blend-03.jpg);
    mix-blend-mode : multiply; 
}

或者我们可以为每个 background-image 指定不同的混合类型:

1
2
3
4
.blend {
    background-image : url(blend-01.jpg), url(blend-02.jpg), url(blend-03.jpg);
    mix-blend-mode : multiply, screen, luminosity; 
}