一篇文章講了《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
原文地址