更豐富的網頁多圖層效果:css混合模式

更豐富的網頁多圖層效果:css混合模式

圖層

在Photoshop等影象編輯軟體裡,圖層是最基礎的概念之一。我們平時看一張照片,就可能想到“遠處的背景”、“近處的人物”這樣的描述,這其實就是在劃分圖層。多個圖層從下到上(從遠到近)依次拼合,就得到完整的影象。

分圖層很有用。一方面,圖層是獨立的,修改時不會相互影響,另一方面,圖層可以保留原始影象,便於還原或做其他調整。

網頁裡的圖層

在網頁裡,並沒有明確的圖層的概念,但卻很適合當做圖層去理解。網頁內的每個元素,都可以看做有一個自己的圖層。css裡的z-index

可以看到,這個元素指定了多個背景,從上到下依次是1.jpg

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

在這個例子中,只要div.blending-element-1

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

效果是:

可以看到div.container

會看到混合模式失效了:

可以看到,在有了isolation: isolate這個屬性後,好像就有了字面上“隔離”的效果。

事實上,並沒有“隔離”這種特殊效果,它的本質是建立新的層疊上下文。在元素合成這一點上,你可以理解為是新開一個分組。分組有什麼用呢?請看下圖:

這種層級關係非常像html的DOM樹,只不過,每一個節點(分組)的生成,都需要有對應元素建立新的層疊上下文。如果沒有元素建立新層疊上下文,那麼無論DOM樹多麼複雜,它們都屬於同一個層疊上下文內(也就是上圖沒有任何group,layer1~6平鋪)。

分組會改變元素參與混合的先後順序。在複雜的DOM樹中,可能有多個元素都設定了混合模式,這時候,總是組內的圖層先相互混合,然後把整個組看作一個整體,再和組外的其他元素混合。由於DOM元素預設的混合方式都是normal,也就是上層遮擋下層的風格,因此看起來就好像組內和組外隔離了開來,這就是isolation的意思。

前面說isolation可以和mix-blend-mode搭配使用,就是因為它可以為元素之間的混合增加一層控制。對於background-blend-mode而言,isolation並沒有用,因為background-blend-mode作用的多個背景都位於同一個元素內部,相當於一定在一個獨立的分組內,和外部的其他元素無關。

關於更多的建立新的層疊上下文的條件,推薦檢視MDN的文件。你可以看到isolation: isolate;只是其中的一種情況。

附帶的一點補充

瀏覽器相容性

background-blend-mode

mix-blend-mode

就本文的時間點而言,瀏覽器的支援範圍還是有些不足。不過,混合模式只是一個視覺效果,要做相容的話,先看看那些不支援的瀏覽器裡的效果吧。如果差得不多,你也許可以接受。如果情況並不能接受,那就做一些調整,比如圖片素材等,直到它看起來不是太難看。

合成的另一個步驟

w3c文件裡提到合成(compositing)實際上分為兩步,第一步是混合(blending),緊接著還有第二步叫Porter-Duff compositing。如果你有興趣,可以自行檢視。

這個Porter-Duff compositing雖然包含了很多種類,但就css而言,其實只有source-over可用(也就是說,固定的)。這也正是和我們視覺感受最一致的前景覆蓋後景的效果。

前文有提到混合模式的計算式所取的顏色值是不考慮透明度的,但實際我們知道在應用混合模式的同時設定透明度是可以改變效果的。這就是因為透明度會在這第二步合成裡參與計算。

更多混合模式的計算原理

推薦閱讀Photoshop Blend Modes Explained

結語

一個有趣的事情是,我們在用混合模式的時候,幾乎都是會去一個一個試,直到找到看起來還不錯的效果。而不是說,我能一眼知道應該用哪個混合模式。不過即便如此,瞭解一點混合模式的原理,也還是應該有助於我們更快地找到那個不錯的混合模式的,大概。

在我看來,網頁的混合模式可以減少某些影象素材的編輯工作。另外,因為原圖被保留了下來,所以可以在任何需要的時候還原,或者重新參與合成。

(重新編輯自我的部落格,原文地址:http://acgtofe.com/posts/2016/01/blending-modes-adventure