0

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

但是,鉴于以下示例和 css,似乎外部 div 的透明度总是优先于内部 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;
}
4

2 回答 2

0

我想你需要使用

rgba(255,255,255,0.5);

反而。

这是你需要的吗?提琴手

于 2013-07-12T14:21:57.200 回答
0

不是作为孩子,而是作为DIV一个绝对相互独立的人:

http://jsfiddle.net/6Wnhy/

于 2013-07-12T14:29:09.620 回答