图层索引和不透明度问题

时间:2012-01-17 10:03:04

标签: html css opacity transparent

我将外部div的opacity属性设置为.5, 我将内部div的不透明度值设置为1 但它仍然是透明的

这是示例代码: 的 HTML:

<div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>

CSS:

#div1{
        background: black;
        opacity:.5;
        width:300px;
        height:300px;
        }
        #div2{
            background:white;
            width:150px;
            height:150px;
            opacity: 1;
        }
        #div3{
            display: block;
            width: 50px;
            height: 50px;
            opacity: 1;
            background: black;
        }

那么问题出在哪里? 或者我错过的任何事情? 帮助我!

1 个答案:

答案 0 :(得分:3)

这是一个关于CSS的常见误解,您不能在父级上设置不透明度,然后阻止它影响其子级。您需要为#div1设置Alpha颜色:

#div1{
   background: rgba(0,0,0,0.5);
   width:300px;
   height:300px;
}