摘要：與繪制順序密切相關(guān)的概念是層疊上下文。把正常也算上的話，現(xiàn)在網(wǎng)頁(yè)里可用的混合模式一共種。因此，正片疊底是一個(gè)變暗的混合模式。需要注意的是，其中這個(gè)位于最下層的背景該元素?zé)o背景色，它的混合模式其實(shí)是沒(méi)有作用的，可以認(rèn)為就是默認(rèn)值。

在Photoshop等圖像編輯軟件里，圖層是最基礎(chǔ)的概念之一。我們平時(shí)看一張照片，就可能想到“遠(yuǎn)處的背景”、“近處的人物”這樣的描述，這其實(shí)就是在劃分圖層。多個(gè)圖層從下到上（從遠(yuǎn)到近）依次拼合，就得到完整的圖像。

分圖層很有用。一方面，圖層是獨(dú)立的，修改時(shí)不會(huì)相互影響，另一方面，圖層可以保留原始圖像，便于還原或做其他調(diào)整。

在網(wǎng)頁(yè)里，并沒(méi)有明確的圖層的概念，但卻很適合當(dāng)做圖層去理解。網(wǎng)頁(yè)內(nèi)的每個(gè)元素，都可以看做有一個(gè)自己的圖層。css里的z-index，也很像是調(diào)整圖層順序的工具。

準(zhǔn)確地說(shuō)，決定網(wǎng)頁(yè)內(nèi)元素覆蓋關(guān)系的是繪制順序，繪制順序靠后的元素，將覆蓋繪制順序靠前的元素。

與繪制順序密切相關(guān)的概念是層疊上下文（stacking context）。在一個(gè)層疊上下文內(nèi)，瀏覽器總是遵循特定的順序去繪制該上下文內(nèi)的所有元素。

我們有時(shí)候會(huì)很仔細(xì)地去調(diào)整z-index，這是因?yàn)榫W(wǎng)頁(yè)內(nèi)的元素會(huì)有重疊：

像這樣重疊時(shí)，一個(gè)元素就擋住另一個(gè)元素的一部分。我們可能想改變一下覆蓋關(guān)系：

在這里，它們的差異只有元素的重疊部分。如果重疊部分和其中一個(gè)元素一致，那么看起來(lái)就是這個(gè)元素更靠上，覆蓋了另一個(gè)元素。

實(shí)際上，網(wǎng)頁(yè)里的重疊遠(yuǎn)不只有這樣一小部分。上面的示例里的兩個(gè)元素除了相互重疊外，各自也與本文的背景元素存在重疊。如果在元素上設(shè)置一個(gè)背景，那么可以說(shuō)頁(yè)面內(nèi)的所有可見(jiàn)元素的最終顯示效果，都和這個(gè)背景關(guān)聯(lián)了起來(lái)。

網(wǎng)頁(yè)是如何決定在這樣多的重疊關(guān)系下，最終呈現(xiàn)的效果的？這也是一個(gè)有一定章法的過(guò)程，叫做合成（compositing）。

簡(jiǎn)單透明度合成（simple alpha compositing）是我們很容易理解的一種合成方式。它是在本文接下來(lái)要介紹的混合模式出現(xiàn)之前，唯一在網(wǎng)頁(yè)里應(yīng)用的合成方式。它在當(dāng)前各類(lèi)瀏覽器內(nèi)都可用。

之所以說(shuō)容易理解，是因?yàn)樗臀覀兤綍r(shí)的視覺(jué)感受很一致。比如前文的例子里改變一下其中一個(gè)元素的透明度：

當(dāng)一個(gè)元素是半透明的，那么即便它遮擋了在它后面的元素的一部分，那一部分也是可見(jiàn)的。透明度越高（opacity越接近0），則重疊區(qū)域越偏向于被遮擋的元素。完全透明（opacity為0）時(shí)，則看起來(lái)沒(méi)有元素被遮擋。

混合模式一直是Photoshop等圖像編輯軟件內(nèi)的圖層面板的重要功能，現(xiàn)在它也存在于w3c的推薦規(guī)范。

網(wǎng)頁(yè)中可用的混合模式如下：

上圖是對(duì)照Photoshop里的混合模式來(lái)標(biāo)注的，其中紫紅色部分是網(wǎng)頁(yè)里可用的混合模式，最右邊則是混合模式的群組分類(lèi)。默認(rèn)的“正?！?，實(shí)際就是前面說(shuō)的簡(jiǎn)單透明度合成，因此可以認(rèn)為是新增了15種混合模式。把“正?！币菜闵系脑挘F(xiàn)在網(wǎng)頁(yè)里可用的混合模式一共16種。

雖然混合模式種類(lèi)不少，但最為常用的并不多，它們分別是正片疊底（Multiply）、濾色（Screen）、疊加（Overlay）和柔光（Soft Light）。

混合模式本質(zhì)是分別取前景和背景（參與混合的兩個(gè)圖層）的像素點(diǎn)，然后用它們的顏色值進(jìn)行數(shù)學(xué)運(yùn)算，從而得到一個(gè)新的顏色值。每一個(gè)重疊區(qū)域的像素點(diǎn)都會(huì)經(jīng)過(guò)這個(gè)計(jì)算過(guò)程。

下面以正片疊底為例，說(shuō)明一下這個(gè)過(guò)程。

混合模式既然拿顏色值來(lái)做數(shù)學(xué)計(jì)算，那么顏色值一定是數(shù)字的形式。不過(guò)，顏色值會(huì)對(duì)應(yīng)怎樣的數(shù)字呢？在混合模式計(jì)算里，所有的顏色值都是從0到1的小數(shù)（區(qū)間[0, 1]）。因此，顏色值在參與計(jì)算前，都會(huì)轉(zhuǎn)換為這樣的小數(shù)。

顏色都可以用RGB來(lái)表示，如純白色在css里可以表示為rgb(255, 255, 255)。注意RGB三通道的最大值為255，最小值為0，因此可以用通道色值÷255的計(jì)算式轉(zhuǎn)換為0到1的數(shù)字。比如純白色將是rgb(1, 1, 1)。

正片疊底（Multiply，日語(yǔ)版寫(xiě)作“乗算”）的計(jì)算式是：

x = a × b

可以看到，這就是一個(gè)簡(jiǎn)單的乘法。由于都是0到1之間的小數(shù)，因此乘法運(yùn)算會(huì)使結(jié)果值更接近0（比如0.8 x 0.5 = 0.4）。因此，正片疊底是一個(gè)變暗的混合模式。

每一種混合模式，都會(huì)對(duì)應(yīng)這樣一個(gè)計(jì)算式，其中a表示前景圖層（Active Layer），b表示背景圖層（Background Layer）。RGB三通道分別進(jìn)行一次運(yùn)算后，就可以得到混合后的顏色值。整個(gè)過(guò)程如下：

在圖層設(shè)置了透明度的情況下，混合的計(jì)算式中的數(shù)字仍然取圖層原本的像素顏色（也就是opacity: 1;時(shí)看到的顏色）。

與混合模式有關(guān)的一共3個(gè)屬性，background-blend-mode、mix-blend-mode和isolation。

這個(gè)屬性一般和多重背景的background-image搭配使用，它和background-image一樣可以指定多個(gè)值。這將在某一個(gè)元素的多個(gè)背景之間形成混合，比如：

.blending-element-0 {
    background-image: url(1.jpg), url(2.jpg), url(3.jpg);
    background-blend-mode: multiply, screen;
}

可以看到，這個(gè)元素指定了多個(gè)背景，從上到下依次是1.jpg、2.jpg、3.jpg。下面的background-blend-mode則是與它對(duì)應(yīng)的，它表示1.jpg的混合模式是multiply，2.jpg的混合模式是screen，3.jpg的混合模式是multiply（當(dāng)background-blend-mode的數(shù)目比background-image少時(shí)，會(huì)按照值列表進(jìn)行重復(fù)）。

需要注意的是，其中3.jpg這個(gè)位于最下層的背景（該元素?zé)o背景色），它的混合模式multiply其實(shí)是沒(méi)有作用的，可以認(rèn)為就是默認(rèn)值normal。你可以試試在Photoshop里只留一個(gè)圖層，然后切換各種混合模式，會(huì)發(fā)現(xiàn)圖像不會(huì)有任何變化。

如果元素指定了背景色（background-color），那么背景色將成為最下層的背景。

如果有使用background這個(gè)簡(jiǎn)寫(xiě)屬性，那么background-blend-mode的值將會(huì)被重置為默認(rèn)。

這2個(gè)屬性是搭配使用的。相比前面的background-blend-mode是應(yīng)用在單個(gè)元素的多背景之間，mix-blend-mode則是應(yīng)用于多個(gè)元素，而且除背景外，元素內(nèi)的文字等其他內(nèi)容也會(huì)被混合。

mix-blend-mode比較類(lèi)似opacity，作用于一個(gè)元素的同時(shí)也會(huì)作用于這個(gè)元素的全部子元素。因此，如果不想要子元素內(nèi)容也受到影響（就像設(shè)置半透明時(shí)可能希望里面的文字仍是不透明的），改用background-blend-mode會(huì)更合適。

使用mix-blend-mode的代碼大致這樣：

.blending-element-1,
.blending-element-2{
    mix-blend-mode: soft-light;
}

在這個(gè)例子中，只要div.blending-element-1和div.blending-element-2存在重疊，就可以有混合效果。那么，只是這2個(gè)元素之間混合嗎？父元素div.container有背景，甚至前面還有其他的位于下方的元素的話，它們也參與混合嗎？

這就是如何界定哪些元素參與混合的問(wèn)題。網(wǎng)頁(yè)里是這樣做的：以層疊上下文（stacking context）為依據(jù)，為元素進(jìn)行分組，位于同一個(gè)層疊上下文內(nèi)的元素算作同一組，同一組內(nèi)才能發(fā)生混合。

請(qǐng)?jiān)倏催@樣一個(gè)例子（只列出了相關(guān)的css）：

.container {
    background: gray;
}
.blending-image {
    mix-blend-mode: multiply;
}

效果是：

可以看到div.container的灰色背景和img.blending-image的圖片內(nèi)容已經(jīng)有了混合效果。這時(shí)候，再給中間的元素div.inner-wrapper稍作改變：

.inner-wrapper{
    isolation: isolate;
}

會(huì)看到混合模式失效了：

可以看到，在有了isolation: isolate這個(gè)屬性后，好像就有了字面上“隔離”的效果。

事實(shí)上，并沒(méi)有“隔離”這種特殊效果，它的本質(zhì)是創(chuàng)建新的層疊上下文。在元素合成這一點(diǎn)上，你可以理解為是新開(kāi)一個(gè)分組。分組有什么用呢？請(qǐng)看下圖：

這種層級(jí)關(guān)系非常像html的DOM樹(shù)，只不過(guò)，每一個(gè)節(jié)點(diǎn)（分組）的生成，都需要有對(duì)應(yīng)元素創(chuàng)建新的層疊上下文。如果沒(méi)有元素創(chuàng)建新層疊上下文，那么無(wú)論DOM樹(shù)多么復(fù)雜，它們都屬于同一個(gè)層疊上下文內(nèi)（也就是上圖沒(méi)有任何group，layer1~6平鋪）。

分組會(huì)改變?cè)貐⑴c混合的先后順序。在復(fù)雜的DOM樹(shù)中，可能有多個(gè)元素都設(shè)置了混合模式，這時(shí)候，總是組內(nèi)的圖層先相互混合，然后把整個(gè)組看作一個(gè)整體，再和組外的其他元素混合。由于DOM元素默認(rèn)的混合方式都是normal，也就是上層遮擋下層的風(fēng)格，因此看起來(lái)就好像組內(nèi)和組外隔離了開(kāi)來(lái)，這就是isolation的意思。

前面說(shuō)isolation可以和mix-blend-mode搭配使用，就是因?yàn)樗梢詾樵刂g的混合增加一層控制。對(duì)于background-blend-mode而言，isolation并沒(méi)有用，因?yàn)?b>background-blend-mode作用的多個(gè)背景都位于同一個(gè)元素內(nèi)部，相當(dāng)于一定在一個(gè)獨(dú)立的分組內(nèi)，和外部的其他元素?zé)o關(guān)。

關(guān)于更多的創(chuàng)建新的層疊上下文的條件，推薦查看MDN的文檔。你可以看到isolation: isolate;只是其中的一種情況。

background-blend-mode

mix-blend-mode

就本文的時(shí)間點(diǎn)而言，瀏覽器的支持范圍還是有些不足。不過(guò)，混合模式只是一個(gè)視覺(jué)效果，要做兼容的話，先看看那些不支持的瀏覽器里的效果吧。如果差得不多，你也許可以接受。如果情況并不能接受，那就做一些調(diào)整，比如圖片素材等，直到它看起來(lái)不是太難看。

w3c文檔里提到合成（compositing）實(shí)際上分為兩步，第一步是混合（blending），緊接著還有第二步叫Porter-Duff compositing。如果你有興趣，可以自行查看。

這個(gè)Porter-Duff compositing雖然包含了很多種類(lèi)，但就css而言，其實(shí)只有source-over可用（也就是說(shuō)，固定的）。這也正是和我們視覺(jué)感受最一致的前景覆蓋后景的效果。

前文有提到混合模式的計(jì)算式所取的顏色值是不考慮透明度的，但實(shí)際我們知道在應(yīng)用混合模式的同時(shí)設(shè)置透明度是可以改變效果的。這就是因?yàn)橥该鞫葧?huì)在這第二步合成里參與計(jì)算。

推薦閱讀Photoshop Blend Modes Explained。

一個(gè)有趣的事情是，我們?cè)谟没旌夏Ｊ降臅r(shí)候，幾乎都是會(huì)去一個(gè)一個(gè)試，直到找到看起來(lái)還不錯(cuò)的效果。而不是說(shuō)，我能一眼知道應(yīng)該用哪個(gè)混合模式。不過(guò)即便如此，了解一點(diǎn)混合模式的原理，也還是應(yīng)該有助于我們更快地找到那個(gè)不錯(cuò)的混合模式的，大概。

在我看來(lái)，網(wǎng)頁(yè)的混合模式可以減少某些圖像素材的編輯工作。另外，因?yàn)樵瓐D被保留了下來(lái)，所以可以在任何需要的時(shí)候還原，或者重新參與合成。

（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2016/01/blending-modes-adventure）