CSS覆盖元素和不透明度问题

Question

我发现两个重叠元素的透明度都设置为0.5时出现了问题。这两个元素完全相同且绝对定位，一个在另一个上面。

根据常识，这种效果应该产生100%不透明度的图像（0.5+0.5 = 1），但实际上并不是这样。

如果有人能解释一下渲染这些元素的机制，我会非常感激，因为显然有一些潜在的问题我还没有理解。

HTML:

<div class="test">
    <img src="..." alt="" width="200" height="200" class="t"/>
    <img src="..." alt="" width="200" height="200" class="t"/>   
</div>
<img src="..." alt="" width="200" height="200" class="test"/> 

CSS：

.test{
    float: left;
    position:relative;
    width: 200px;
    height: 200px;
}
.test .t{
    position:absolute;
    top:0;
    left:0;
    opacity: 0.5;
}

jsFiddle

感谢

- mpietrowiak

---

你不仅仅是在图像中添加图像。还有白色背景。第一张图片与白色混合。第二张图片与第一次混合的结果混合。 - TheSavage

这不是0.5+0.5，而是0.5 * 0.5，即75%的不透明度。如果三个元素叠放在一起，透明度为0.5，那么它们看起来会是什么样子呢？150%的不透明度？实际上不是。它们组合起来的不透明度将达到87.5%。 - Robert Koritnik

@TheSavage，白色背景对元素的不透明度没有任何影响。不要混淆亮度和不透明度。 - brouxhaha

Answer 1

试着将它看作是百分比销售。这有点不同，但这个类比可以使人们理解正在发生的事情。当一件10美元的商品打8折时，再减去20%，它并不是全额打折（80% + 20%）。你可以像这样计算最终价格：

$10 * (1 - 0.8)  = $2 * (1 - 0.2) = $1.60.

50%的不透明度意味着光线的50%被阻挡。因此，当您堆叠两个50%不透明度的元素时，这意味着50%的光线被阻挡，并且额外的层会阻挡更多的50%光线。由于只有50%的光线穿过第一层，因此仅阻止了该附加光线的50％。所以计算公式如下：

50% + (50% * 50%) = 75% opacity.

演示

.num2 {
    opacity: 0.75;
}

- brouxhaha

---

非常感谢您的建设性回复；那么您认为我们无法通过两个重叠的“img”来恢复100%的不透明度？ - kevpoccs

你能解释一下 50% + (50% * 50%) 这个方程吗？我认为括号中的两个值是叠加的元素。为什么要加上50%？ - bozdoz

想象一下有两个窗户，每个窗户都可以让50%的光线透过。第一个窗户将挡住通过的50%的光线，这意味着最初的光线的50%传递到下一个窗户。然后，第二个窗户会挡住第一个窗户剩余光线中的50%，这意味着最初光线的25%（50%的50%或50%50%或1/250%）从第二个窗户透过。 - brouxhaha

Answer 2

这里有三个项目需要相加：

• 100%的白色背景
• 第一张图片，透明度为50%
• 第二张图片，透明度为50%

前两个项目会使第一张图片在与第二张图片混合之前变得更加轻盈。

- Don Rhummy

---

如果您有黑色背景，则仍然会有两个50％不透明度的图像，导致组合的75％不透明度。亮度和不透明度无关。 - brouxhaha

Answer 3

简短回答：不透明度不是线性函数，因此它不会叠加。

更详细的回答：这里或这里

- Stephen Thomas