CSS重叠元素和不透明度问题答案

【问题标题】：CSS overlapping elements & opacity issueCSS重叠元素和不透明度问题
【发布时间】：2014-01-23 06:56:56
【问题描述】：

我偶然发现了渲染两个不透明度 = .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

谢谢

【问题讨论】：

您不只是将图像添加到图像中。还有白色背景。第一个图像与白色混合。第二个图像与第一个混合的结果混合。
不是 0.5+0.5，而是0.5 * 0.5，75% 不透明。使用您的想法，三个元素看起来如何堆叠在一起，不透明度为 0.5？ 150% 不透明？好吧，没有。它们加起来是 87.5% 的不透明。
@TheSavage，白色背景对元素不透明度的影响为 0。不要混淆亮度和不透明度。

标签： css

【解决方案1】：

试着把它想象成百分比销售额。这有点不同，但这个类比让我们了解正在发生的事情。当一件 10 美元的商品减价 80% 时，您再减价 20%，这不是 100% 的折扣（80% + 20%）。你这样计算最终价格：

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

50% 的不透明度意味着 50% 的光线被阻挡。因此，当您堆叠两个不透明度为 50% 的元素时，这意味着 50% 的光被阻挡，另外 50% 的光被附加层阻挡。由于只有 50% 的光通过第一层，因此只有 50% 的额外光被阻挡。所以计算将是：

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

DEMO

.num2 {
    opacity: 0.75;
}

【讨论】：

非常感谢您的建设性回复；所以你认为我们不能用 2 img 重叠来恢复 100% 的不透明度？
您能解释一下50% + (50% * 50%) 等式吗？我想我理解括号中的两个值是堆叠的元素。为什么要加到 50%？
考虑有两个窗口，每个窗口允许 50% 的光通过。第一个窗口将阻挡 50% 的光线通过，这意味着 50% 的初始光线通过下一个窗口。然后，该窗口会阻挡来自第一个窗口的 50% 的剩余光，这意味着 25%（50% 的 50% 或 50% * 50% 或 1/2 * 50%）的初始光来自第二个窗口。

【解决方案2】：

将三个项目加在一起：

100% 的白色背景
50% 的第一张图片
第二张图片 50%

在与第二张图片混合之前，前两个使第一张图片更亮。

【讨论】：

如果您有黑色背景，您仍然有两个不透明度为 50% 的图像，因此组合不透明度为 75%。亮度和不透明度无关。

【解决方案3】：

简答：不透明度不是线性函数，因此不会相加。

更长的答案：here 或 here

【讨论】：