CSS应用：混合模式

混合模式决定了元素多个背景重叠时，最终显示出的色彩颜色。本质上说，就是将每层背景的颜色通过一定的公式计算出每个像素表现出的最终颜色，CSS3提供了多种混合模式，每种不同的混合模式都提供了不同的计算公式。使用混合可以轻松地制作出许多特殊的效果，下面对CSS中提供的混合模式做一个介绍。

background-blend-mode属性

该属性用于定义元素背景的混合模式。每个背景层的颜色都会与自己之下的背景层以及元素的背景色进行混合，该属性用于定义颜色混合的方式。

background-blend-mode属性的语法如下：

background-blend-mode: <blend-mode>;

blend-mode可以是一个列表，和background-image对应，列表中的第一个元素将被应用到第一层，如果没有足够的值与background-image对应，将重复使用blend-mode值的列表直到有足够的值。

blend-mode的可选值包括：normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。每个值都代表了一种混合模式，对应了一种背景色的混合方法，后面我们将具体讲解。

混合模式介绍

混合模式定义了元素背景颜色的混合方式，混合模式计算的公式如下：

Cm = B(Cb, Cs)

含义如下：

Cm	混合后的颜色
B	混合公式
Cb	背景颜色
Cs	参与混合的颜色，即源颜色

混合后的颜色值将被限制在颜色值的有效范围内。

如果背景色中使用了透明度，公式则需要做适当的调整。一个完全不透明的背景则是用上面的公式进行计算，而当背景颜色使用了透明度，则公式中需要加入透明度的权重，如下：

Cr = (1 - αb) x Cs + αb x B(Cb, Cs)

含义如下：

Cr	混合后的颜色
B	混合公式
Cb	背景颜色
Cs	参与混合的颜色，即源颜色
αb	参与混合的背景的透明度

上面的公式是混合模式的统一公式，其中的公式B由每种混合模式来决定，即公式B的定义和blend-mode的值是相对应的，下面我们详细介绍CSS中的每种混合模式对应的公式B，以及达到的效果。

所有的例子都是在以下背景的基础上运用混合模式。

width: 320px;

height: 320px;

background:

radial-gradient( #3893ec 105px, transparent 105px, transparent) 0px -52px no-repeat,

radial-gradient( #ec3839 105px, transparent 105px, transparent) -52px 52px no-repeat,

radial-gradient( #eceb38 105px, transparent 105px, transparent) 52px 52px no-repeat;

normal混合模式

这个是默认值。计算的结果为选择源颜色。

B(Cb, Cs) = Cs

background-blend-mode: normal;

效果和不设置混合模式的效果是一样的。

multiply混合模式

计算的结果是背景颜色和源颜色的乘积，通常会导致颜色变暗。

任何颜色同黑色相乘都是黑色（黑色为RGB(0, 0, 0)）；任何颜色同白色相乘都是原始颜色（白色为RGB(255,255,255)）。

B(Cb, Cs) = Cb x Cs

background-blend-mode: multiply;

结果颜色的值是将两种颜色的颜色值相乘，但注意是基于小数的，具体算法如下：

假定Cb为RGB(r1,g1,b1)，Cs为RGB(r2,g2,b2)，则：

B(Cb, Cs) = Cb x Cs = RGB(r1 * r2 / 255, g1 * g2 / 255, b1 * b2 /255)

很容易看出结果颜色将比背景颜色或源颜色更暗（RGB的值越小越接近黑色，就越暗）。

注意：以下所有的混合模式的计算都是基于该种方式的。

screen混合模式

将背景颜色和源颜色的值的补相乘，再将结果取补。

计算的结果总是至少同两种原始颜色中的任意一种异样亮。任何颜色同白色使用screen将产生白色；任何颜色同黑色使用screen将保持不变。其效果类似于同时将多个摄影幻灯片投影到一个屏幕上。

B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)] = Cb + Cs -(Cb x Cs)

background-blend-mode: screen;

overlay混合模式

根据背景色的值，使用multiply或者screen混合颜色。

源颜色叠加到背景，同时保留背景的高亮和阴影。背景色不被替换而是和源颜色混合以反映背景的亮与暗。

B(Cb, Cs) = HardLight(Cs, Cb)

overlay混合模式是hard-light混合模式的取反，可以在hard-light混合模式查看HardLight公式的定义。

background-blend-mode: overlay;

darken混合模式

选择背景和源颜色中更黑的颜色。

背景色使用背景和源中更黑的颜色替换。

B(Cb, Cs) = min(Cb, Cs)

background-blend-mode: darken;

lighten混合模式

选择背景和源颜色中更亮的颜色。

背景色使用背景和源中更亮的颜色替换。

B(Cb, Cs) = max(Cb, Cs)

background-blend-mode: lighten;

color-dodge混合模式

使背景色变亮以反映源颜色。与黑色混合将无变化。

if(Cb == 0)

B(Cb, Cs) = 0

else if(Cs == 1)

B(Cb, Cs) = 1

else

B(Cb, Cs) = min(1, Cb / (1 - Cs))

background-blend-mode: color-dodge;

color-burn混合模式

使背景色变暗以反映源颜色。与白色混合将无变化。

if(Cb == 1)

B(Cb, Cs) = 1

else if(Cs == 0)

B(Cb, Cs) = 0

else

B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

background-blend-mode: color-burn;

hard-light混合模式

根据源颜色，multiply或者screen颜色。效果同将一个强光照射到背景上类似。

if(Cs <= 0.5)

B(Cb, Cs) = Multiply(Cb, 2 x Cs)

else

B(Cb, Cs) = Screen(Cb, 2 x Cs -1)

看multiply混合模式和screen混合模式的计算公式。

background-blend-mode: hard-light;

soft-light混合模式

根据源颜色值，将颜色变黑或者变亮。效果类似于将发散的聚光灯照射到背景上。

if(Cs <= 0.5)

B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)

else

B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)

同时：

if(Cb <= 0.25)

D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb

else

D(Cb) = sqrt(Cb)

background-blend-mode: soft-light;

difference混合模式

用背景色和源颜色中更亮的颜色减去更暗的颜色。

与白色混合相当于将颜色反转，与黑色混合无变化。

B(Cb, Cs) = | Cb - Cs |

background-blend-mode: difference;

exclusion混合模式

产生和difference模式类似的效果，但程度更低。

与白色混合相当于将颜色反转，与黑色混合无变化。

B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs

background-blend-mode: exclusion;

hue混合模式

使用源颜色的色调和背景色的饱和度和亮度创建结果颜色。

B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))

其中用到的公式的定义如下：

Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue

ClipColor(C)

L = Lum(C)

n = min(Cred, Cgreen, Cblue)

x = max(Cred, Cgreen, Cblue)

if(n < 0)

C = L + (((C - L) * L) / (L - n))

if(x > 1)

C = L + (((C - L) * (1 - L)) / (x - L))

return C

SetLum(C, l)

d = l - Lum(C)

Cred = Cred + d

Cgreen = Cgreen + d

Cblue = Cblue + d

return ClipColor(C)

Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

SetSat(C, s)

if(Cmax > Cmin)

Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))

Cmax = s

else

Cmid = Cmax = 0

Cmin = 0

return C;

background-blend-mode: hue;

saturation混合模式

使用源颜色的饱和度和背景色的色调和亮度创建结果颜色。与纯灰色（无饱和度）的色彩混合将无变化。

B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))

其中用到的公式的定义同hue混合模式。

background-blend-mode: saturation;

color混合模式

使用源颜色的色调和饱和度以及背景色的亮度创建结果颜色。

B(Cb, Cs) = SetLum(Cs, Lum(Cb))

其中用到的公式的定义同hue混合模式。

background-blend-mode: color;

luminosity混合模式

使用源颜色的亮度和背景色的色调和饱和度创建结果颜色。

B(Cb, Cs) = SetLum(Cb, Lum(Cs))

其中用到的公式的定义同hue混合模式。

background-blend-mode: luminosity;

混合模式实例

下运用混合模式可以创造出丰富多彩的效果，下面我们来看几个实例。

multiply混合模式运用

background:

repeating-radial-gradient(circle, transparent, transparent 3.5em, tomato 3.5em, tomato 4.5em),

repeating-radial-gradient(circle, transparent, transparent 3.5em, dodgerblue 3.5em, dodgerblue 4.5em),

repeating-radial-gradient(circle, transparent, transparent 2.5em, gold 2.5em, gold 2.75em),

floralwhite;

background-size: 10em 10em;

background-blend-mode: multiply;

background-position:0 0, 5em 5em, 10em 5em;

difference混合模式运用

background:

repeating-radial-gradient(circle at top left, red, red 4em, transparent 4em, transparent 15em),

repeating-radial-gradient(circle at top right,lime,lime 4em,transparent 4em,transparent 15em),

repeating-radial-gradient(circle at bottom right,yellow,yellow 4em,transparent 4em,transparent 15em),

repeating-radial-gradient(circle at bottom left,blue,blue 4em,transparent 4em,transparent 15em),

white;

background-blend-mode: difference;

如果你对混合模式感兴趣，可以继续关注我后续的CSS绘图系列。