Alpha混合：一個顏色上覆蓋另一個透明顏色

事情起因本來是這樣的，我在網站里加了一張純色的圖片，顏色是#EFCAC3

結果網站上呈現出來的時候變色了？？？變成了#A78D88。

一臉懵逼，然後我打開控制檯看了一下，頁面上其有一條rgba(0,0,0,0.3) Σ( ￣д￣；) ！！！……

那想讓顯示之後的效果爲#EFCAC3就得重新設置原來的圖片顏色了，這就涉及到計算alpha混合了。

Alpha混合就是實現一種混合之後的顏色效果。
假設一種不透明東西的顏色是A，另一種透明的東西的顏色是B，那麼透過B去看A，看上去的顏色C就是B和A的混合顏色。
可以用下面的這個式子來近似計算，設B物體的透明度爲alpha(取值爲0-1，0爲完全透明，1爲完全不透明)

$R(C)=alpha*R(B)+(1-alpha)*R(A)$

$G(C)=alpha*G(B)+(1-alpha)*G(A)$

$B(C)=alpha*B(B)+(1-alpha)*B(A)$

先說明一下，rgba裏邊的a其實就是alpha值。按百分比來看其取值範圍爲0-1；但是按數值來看，32位的alpha值的數值的範圍是0到255，其中0表示完全透明的顏色，255表示完全不透明的顏色。上邊的公式是使用alpha的百分比計算的嗷。

舉個栗子： 透明度70%

• 用百分制表示：alpha = 0.3
• 用數值表示：alpha = 76.5

現在已知現在覆蓋的顏色爲rgba(0,0,0,0.3)，即：B的rgb(0,0,0)，alpha=0.3
現在想讓C的顏色變爲#EFCAC3也就是rgb(239,202,195)，開始計算：

$R(C)=239=0.3*0+0.7*R(A)　　∴R(A)=341$
$G(C)=202=0.3*0+0.7*G(A)　　∴G(A)=289$
$B(C)=195=0.3*0+0.7*B(A)　　∴B(A)=279$

Σ( ￣д￣；) ！！！？？？？？且慢，32位的數據最大是255，我算出來的超過255了！那就證明AB兩個顏色沒辦法融合成C。╭(●｀∀´●)╯哈哈哈哈哈哈哈哈哈哈哈哈哈白算半天。

沒關係，那我重新換個透明蒙板的顏色。原來是黑色透明，換成白色透明就行了。
讓C的顏色依舊是rgb(239,202,195)，B的顏色改爲rgb(255,255,255)，alpha=0.3

$R(C)=239=0.3*255+0.7*R(A)　　∴R(A)=232$

$G(C)=202=0.3*255+0.7*G(A)　　∴G(A)=179$

$B(C)=195=0.3*255+0.7*B(A)　　∴B(A)=169$

設置底層圖片顏色爲rgb(232,179,167)，也就是E8B3A7，透明蒙板的顏色爲rgba(255,255,255,0.3)即可達到我想要的效果。