帶Alpha通道的色彩疊加問題

05-10

寫於2015年3月23日，可能已過時，請謹慎參考。

帶 Alpha 通道的色彩疊加問題?

www.zhouhua.site

css3的rgba色彩模式、png/gif圖片的alpha通道、canvas的rgba色彩模式、css3的陰影、css3的opacity屬性等等，這些應用在網頁中，有意無意間，我們的頁面多了許多半透明的效果。我們知道，在沒有alpha通道的情況下，兩個顏色疊加，上層的顏色會直接覆蓋下層的顏色，但有了alpha通道，一切就沒有這麼簡單了。今天，我們就要探討一下，網頁中，rgba(r1, g1, b1, a1) + rgba(r2, g2, b2, a2)會得到什麼。

為表述方便，不妨假設最後我們得到的色彩是rgba(r, g, b, a)。

先考慮透明度。一個色彩透明度opacity介於0到1之間，opacity=0表示完全透明，opacity=1表示不透明。把要疊加上來的色彩想像成一塊玻璃，如果這塊玻璃的透明度是0.2，意味著它允許透過80%的光線，阻擋20%的光線。

好，現在想像有兩塊玻璃，透明度分別是a1和a2，那麼光線的通過率分別為1-a1和1-a2。所以可以認為，光線穿過第一塊玻璃後，剩餘1-a1；再通過第二塊玻璃後，還有(1-a1)(1-a2)，這就是兩塊玻璃的綜合透光率，相應的，透明度就是1-(1-a1)(1-a2)。

所以我們能得到第一個結論：

，即

接下來考慮rgb各分量，它們的計算方法是一樣的，我們僅以r通道為例，進行推導。還是想像一塊半透明的玻璃，它本身是紅色的，但由於它允許其他光線透過，所以玻璃本身的顏色會變淡。人們實際感受到的顏色，只是玻璃原本的顏色乘以透明度的結果。

如果有兩塊玻璃呢，它們的紅色濃度分別是r1和r2，透明度分別是a1和a2。那麼第一塊玻璃讓人感受到的紅色濃度為r1a1，第二塊玻璃讓人感受到的紅色濃度為r2a2，第一塊玻璃的紅色色彩穿過第二塊玻璃，並與第二塊的紅色疊加在一起的顏色濃度就是：

接下來，我們再把兩塊玻璃合起來，當成一塊玻璃，這個整體的紅色濃度為r，透明度為a。這個a我們之前已經推導過了，是a1+a2-a1a2。那麼，我們有：

由這兩個等式，我們可以得出：

g和b兩個分量上也是如此，在此從略。從推導出來的等式上，我們能直接得出一個結論：顏色疊加的運算，不具備交換率、結合率，也就是說，疊加的順序很重要。