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>

最终的alpha值在<span>？

中会是什么？

Answer 1

80％。

基本上，第一层是60％。第二层是其余部分的50％，因此50％的40％= = 20％...... 60％+ 20％= 80％。

如果您在顶部添加了另外25％的div，则您将处于85％不透明状态：   0.80 +（（1-80）* .25）= 0.85％。

我确信有一些算法函数可以将所有层一起处理，但是通过一些脚本和循环来计算它很容易。