CSS背景色继承问题：父子div背景色叠加计算疑问

嘿，这个问题其实是对RGBA透明度叠加逻辑的典型误解，我来给你捋清楚这里面的门道～

首先要明确：RGBA的alpha通道不是简单相加的！ 你可能误以为父元素的0.7加上子元素的0.3就等于1，也就是完全不透明的黑色，但实际上alpha值的逻辑是「当前层的不透明度」，不是「叠加后的总覆盖度」。

咱们拆解一下实际的计算过程（假设页面底层是白色背景rgba(255,255,255,1)）：

• 父元素的rgba(0,0,0,0.7)，意思是「70%不透明的黑色」，它会和底层白色混合，得到的颜色是rgba(76,76,76,0.7)（白色的30% + 黑色的70%）。
• 子元素的rgba(0,0,0,0.3)是叠加在父元素混合后的颜色之上，这时候子元素的黑色只覆盖30%的区域，剩下70%会透出父元素的混合色。最终计算出来的总alpha值是1 - (1-0.7)*(1-0.3) = 0.79，RGB值是0*0.3 + 76*(1-0.3) ≈ 53，也就是最终呈现的是接近深灰色的rgba(53,53,53,0.79)，和你预想的纯黑完全不是一回事。

简单说，多层半透明元素叠加的总不透明度，是用1减去每一层透明度（1-alpha）的乘积，而不是把alpha值直接相加。只有当某一层的alpha为1时，才会完全盖住下面的所有内容。

如果你的目标是让子元素区域呈现纯黑色，直接给子元素设置background-color: rgba(0,0,0,1)就好，不用依赖父元素的背景叠加，因为叠加逻辑和你想的线性相加完全不同。

内容的提问来源于stack exchange，提问作者Srinivas Damam