html - 你能让 css opacity 堆叠(尤其是在 IE 中)吗？

Question

假设我有 3 个 div，一个位于另一个之上。

但是，鉴于以下示例和 css，外部 div 的透明度似乎总是优先于内部的。我在 jsFiddle 中对此进行了测试，整个过程只有 50% 是白色的。有没有办法让透明度堆叠？所以在这个例子中，我的内部正方形会有大约 80% 的不透明度？

<div class="o1">
    <div class="o2">
        <div class="o3">
            blah
        </div>
        blah
    </div>
    blah
</div>

body {
    background-color: black;
}

.o1 {
    background-color: rgb(255,255,255);
    filter:alpha(opacity=50);
    opacity: 0.5;
    width: 200px;
    height: 200px;
}

.o2 {
    background-color: rgb(255,255,255);
    filter:alpha(opacity=50);
    opacity: 0.5;
    width: 150px;
    height: 150px;
}

.o3 {
    background-color: rgb(255,255,255);
    filter:alpha(opacity=50);
    opacity: 0.5;
    width: 50px;
    height: 50px;
}

Answer 1

我认为你需要使用

rgba(255,255,255,0.5);

相反。

这是你需要的吗？ Jsfiddle