我将外部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;
}
那么问题出在哪里? 或者我错过的任何事情? 帮助我!
答案 0 :(得分:3)
这是一个关于CSS的常见误解,您不能在父级上设置不透明度,然后阻止它影响其子级。您需要为#div1
设置Alpha颜色:
#div1{
background: rgba(0,0,0,0.5);
width:300px;
height:300px;
}