在上篇文章中我们讲了 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
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