一篇文章讲了《JavaScript语言的三种编程范式比较》，今天讲一下Web页面设计时CSS图片的混合处理相关的问题。

在Photoshop软件中，混合是将两个图层的色彩值进行合成，从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于RGB图像。

CSS3中也引入了blend模式，对照Photoshop中的实现，有助于我们深入理解该方法的使用。

Opacity 不透明度

C=d*A+(1-d)*B

相对于不透明度而言，其反义就是透明度。这两个术语之间的关系就类似于正负之间的关系：100%的不透明度就是0%的透明度。该混合模式相对来说比较简单，在该混合模式下，如果两个图层的叠放顺序不一样，其结果也是不一样的（当然50%透明除外）。

该公式中，A代表了上面图层像素的色彩值（A=像素值/255），d表示该层的透明度，B代表下面图层像素的色彩值（B=像素值/255），C代表了混合像素的色彩值（真实的结果像素值应该为255*C）。该公式也应用于层蒙板，在这种情况下，d代表了蒙板图层中给定位置像素的亮度，下同，不再叙述。

Darken 变暗

B<=A: C=BB>=A: C=A

该模式通过比较上下层像素后取相对较暗的像素作为输出，注意，每个不同的颜色通道的像素都是独立的进行比较，色彩值相对较小的作为输出结果，下层表示叠放次序位于下面的那个图层，上层表示叠放次序位于上面的那个图层，下同，不再叙述。

Lighten 变亮

B<=A: C=AB>A: C=B

该模式和前面的模式是相似，不同的是取色彩值较大的（也就是较亮的）作为输出结果。

Multiply 相乘

C=A*B

该效果将两层像素的标准色彩值（基于0..1之间）相乘后输出，其效果可以形容成：两个幻灯片叠加在一起然后放映，透射光需要分别通过这两个幻灯片，从而被削弱了两次。

Screen 滤色

C=1-(1-A)*(1-B) 也可以写成 1-C=(1-A)*(1-B)

该模式和上一个模式刚好相反，上下层像素的标准色彩值反相后相乘后输出，输出结果比两者的像素值都将要亮（就好像两台投影机分别对其中一个图层进行投影后，然后投射到同一个屏幕上）。从第二个公式中我们可以看出，如果两个图层反相后，采用Multiply模式混合，则将和对这两个图层采用Screen模式混合后反相的结果完全一样。

Color Dodge 颜色减淡

C=B/(1-A)

该模式下，上层的亮度决定了下层的暴露程度。如果上层越亮，下层获取的光越多，也就是越亮。如果上层是纯黑色，也就是没有亮度，则根本不会影响下层。

如果上层是纯白色，则下层除了像素为255的地方暴露外，其他地方全部为白色（也就是255，不暴露）。结果最黑的地方不会低于下层的像素值。

Color Burn 颜色加深

C=1-(1-B)/A

该模式和上一个模式刚好相反。如果上层越暗，则下层获取的光越少，如果上层为全黑色，则下层越黑，如果上层为全白色，则根本不会影响下层。结果最亮的地方不会高于下层的像素值。

Linear Dodge 线性减淡

C=A+B

将上下层的色彩值相加。结果将更亮。

Linear Burn 线性加深

C=A+B-1

如果上下层的像素值之和小于255，输出结果将会是纯黑色。如果将上层反相，结果将是纯粹的数学减。

Overlay 叠加

B<=0.5: C=2*A*BB>0.5: C=1-2*(1-A)*(1-B)

依据下层色彩值的不同，该模式可能是Multiply，也可能是Screen模式。

上层决定了下层中间色调偏移的强度。如果上层为50%灰，则结果将完全为下层像素的值。如果上层比50%灰暗，则下层的中间色调的将向暗地方偏移，如果上层比50%灰亮，则下层的中间色调的将向亮地方偏移。对于上层比50%灰暗，下层中间色调以下的色带变窄（原来为0~2*0.4*0.5，现在为0~2*0.3*0.5），中间色调以上的色带变宽（原来为2*0.4*0.5~1，现在为2*0.3*0.5~1）。反之亦然。

Hard Light 强光

A<=0.5: C=2*A*BA>0.5: C=1-2*(1-A)*(1-B)

该模式完全相对应于Overlay模式下，两个图层进行次序交换的情况。如过上层的颜色高于50%灰，则下层越亮，反之越暗。

Soft Light 柔光

A<=0.5: C=(2*A-1)*(B-B*B)+BA>0.5: C=(2*A-1)*(sqrt(B)-B)+B

该模式类似上层以Gamma值范围为2.0到0.5的方式来调制下层的色彩值。结果将是一个非常柔和的组合。

Vivid Light 亮光

A<=0.5: C=1-(1-B)/2*AA>0.5: C=B/(2*(1-A))

该模式非常强烈的增加了对比度，特别是在高亮和阴暗处。可以认为是阴暗处应用Color Burn和高亮处应用Color Dodge。

Linear Light 线性光

C=B+2*A-1

相对于前一种模式而言，该模式增加的对比度要弱些。其类似于Linear Burn,只不过是加深了上层的影响力。

Pin Light 点光

B<2*A-1: C=2*A-12*A-1<B<2*A: C=BB>2*A: C=2*A

该模式结果就是导致中间调几乎是不变的下层，但是两边是Darken和Lighte年模式的组合。

Hard Mix 实色混合

A<1-B: C=0A>1-B: C=1

该模式导致了最终结果仅包含6种基本颜色，每个通道要么就是0，要么就是255。

Difference 差值

C=|A-B|

上下层色差的绝对值。该模式主要用于比较两个不同版本的图片。如果两者完全一样，则结果为全黑。

Exclusion 排除

C=A+B-2*A*B

亮的图片区域将导致另一层的反相，很暗的区域则将导致另一层完全没有改变。

Hue 色相

HcScYc=HASBYB

输出图像的色调为上层，饱和度和亮度保持为下层。对于灰色上层，结果为去色的下层。

Saturation 饱和度

HcScYc=HBSAYB

输出图像的饱和度为上层，色调和亮度保持为下层。

Color 颜色

HcScYc=HASAYB

输出图像的亮度为下层，色调和饱和度保持为上层。

Luminosity 亮度

HcScYc=HBSBYA

输出图像的亮度为上层，色调和饱和度保持为下层。

Dissolve 溶解

该模式不是真正的溶解，其表现和Normal类似。其从上层中随机抽取一些像素作为透明，使其可以看到下层，随着上层透明度越低，可看到的下层区域越多。如果上层完全不透明，则效果和Normal不会有任何不同。

最后，上一张图，可以更加一目了然

mage

在线编辑demo

属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

mix-blend-mode: normal; //正常

mix-blend-mode: multiply; //正片叠底

mix-blend-mode: screen; //滤色

mix-blend-mode: overlay; //叠加

mix-blend-mode: darken; //变暗

mix-blend-mode: lighten; //变亮

mix-blend-mode: color-dodge; //颜色减淡

mix-blend-mode: color-burn; //颜色加深

mix-blend-mode: hard-light; //强光

mix-blend-mode: soft-light; //柔光

mix-blend-mode: difference; //差值

mix-blend-mode: exclusion; //排除

mix-blend-mode: hue; //色相

mix-blend-mode: saturation; //饱和度

mix-blend-mode: color; //颜色

mix-blend-mode: luminosity; //亮度

mix-blend-mode: initial; //初始

mix-blend-mode: inherit; //继承

mix-blend-mode: unset; //复原

在线编辑demo

image.png

参考资料：

MDN: mix-blend-mode
原文地址