Question

我偶然发现了渲染两个重叠元素的问题，其中opacity = .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

感谢

Answer 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;
}

Answer 2

有三个项目加在一起：

100％的白色背景
50％的第一张照片
50％的第二张照片

在与第二张照片混合之前，前两张照片使第一张照片更轻。

Answer 3

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

更长的答案：here或here

CSS重叠元素＆amp;不透明度问题

3 个答案: