CSSで不透明度がどのように不透明になっていますか？

Question

私は、次のようなものがある場合：

body { 
 
    background: #000; 
 
} 
 
div { 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    width: 60px; 
 
    height: 60px; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
}

<div> 
 
    <span></span> 
 
</div>

は、最終的なアルファ値が<span>は何になりますか？

Answer 1

80％。

基本的に、第1の層は60％である。第2層は残りの50％上にあり、したがって40％= 20％... 60％+ 20％= 80％の50％である。

さらに25％のdivを上に追加した場合、85％不透明： 0.80+（（1-80）* 25）= 0.85％になります。

すべてのレイヤーを一緒に処理するためのアルゴリズム機能がありますが、スクリプトとループで計算するのは簡単です。