Compose 和 Blend（二）_html/css_WEB-ITnose

在上篇文章中我们讲了 compose 的一些方法，比如 source-in ， xor 等等。但这些都是裁剪相关的，下面我们就要介绍一下 blend 。

什么是 Blend（混合）

我的理解 blend 是 compose 中的一步，上篇文章中我已讲到了 compose 的一些方法，但是 blend 是将两张图的颜色混合在一起。

最典型的例子就是三原色，我们可以把红、蓝、绿三个球想象成三个图层，黄、青、洋红就是这三个图层 blend 之后的结果。

Photoshop 里的混合模式就是 blend ，这个功能用过 Photoshop 的人应该都很熟悉了。

立即学习“前端免费学习笔记（深入）”；

CSS 中的 Blend

CSS 中 blend 的标准最起初是由 Adobe 公司提出的草案。

CSS 里有 isolation , mix-blend-mode 和 background-blend-mode 三个属性来控制混合的方式。

• mix-blend-mode 指定一个元素将如何与它「下面」的元素混合

• background-blend-mode 指定 background-image 如何与 background-color 混合

• isolation 指定一个元素不参与混合

下面的网站用 css blend 实现了很多复杂的图形，其中一个背景的 css 代码也不过就十几行，比加载一张图片体积小了很多。

http://bennettfeely.com/gradients/

Blend 各种模式的计算方式

blend 属性有很多值，比如 darken , overlay , color-dodge 。其中使用量最多的就是 multiply 正片叠低 ，「正片叠底」这个词很多设计师应该都知道，但是明白它到底是做什么的就不多了。

那么现在我们就来讲一下各种混合模式的计算方式。

Cs = source color = 前景颜色

Cb = backdrop color = 背景颜色

B(Cb, Cs) = 混合模式

Cs、Cb 为一个 1*3 的矩阵 [R, G, B]矩阵中每个元素的取值范围为 0 ~ 1

宣小二

宣小二：媒体发稿平台，自媒体发稿平台，短视频矩阵发布平台，基于AI驱动的企业自助式投放平台。

21

查看详情

normal

B(Cb, Cs) = Cs

normal 方式其实和 compose 中的 source over 行为一样，也是我们一般图片叠加的方法。

multiply

B(Cb, Cs) = Cb x Cs

通过公式我们可以看出混合后的结果比前景和背景都要暗。并且前景和背景中的白色都会被剔除掉。

screen

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

screen 感觉和 multiply 作用正好相反，生成的结果比背景、前景都要亮。

hard-light

if(Cs <= 0.5)    B(Cb, Cs) = Multiply(Cb, 2 x Cs)else    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)  

overlay

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

把 hard-light 中背景和前景颠倒过来就是 overlay

darken

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

选择背景、前景中最暗的像素

lighten

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

选择背景、前景中最亮的像素

color-dodge

if(Cb == 0)    B(Cb, Cs) = 0else if(Cs == 1)    B(Cb, Cs) = 1else    B(Cb, Cs) = min(1, Cb / (1 - Cs))

color-burn

if(Cb == 1)    B(Cb, Cs) = 1else if(Cs == 0)    B(Cb, Cs) = 0else    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

hard-light

if(Cs <= 0.5)    B(Cb, Cs) = Multiply(Cb, 2 x Cs)else    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)  

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)with    if(Cb <= 0.25)        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb    else        D(Cb) = sqrt(Cb)

difference

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

exclusion

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

参考资料

Compositing and Blending Level 1