html - 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> 中的最终 alpha 值是多少？ ？

Answer 1

80%。

基本上第一层是60%。第二层是剩余部分之上的 50%，所以 40% 的 50% == 20%... 60%+20% = 80%。

如果您在顶部添加另一个 25% 的 div，您将达到 85% 的不透明: 0.80 + ((1-.80)*.25) = 0.85%。

我确信有某种算法函数可以一起处理所有层，但使用一些脚本和循环就可以很容易地计算出来。