CSS 中的堆叠不透明度有多不透明？

【问题标题】：How opaque is stacked opacity in CSS?CSS 中的堆叠不透明度有多不透明？
【发布时间】：2016-06-28 10:40:42
【问题描述】：

如果我有以下情况：

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 值是多少？

【问题讨论】：

标签： html css opacity

【解决方案1】：

80%。

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

如果您在顶部再添加 25% 的 div，则您的不透明率为 85%： 0.80 + ((1-.80)*.25) = 0.85%。

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

【讨论】：