0

我在为 .div1 获得正确的不透明度时遇到了一些问题。我只能使它的不透明度低于 .container 或相同的值，但我希望它更高，我想让它达到 1 而不是 0.92。谁能帮我弄清楚如何将 .div1 设置为不透明度 lvl 1？

html: 

<div class="container">  
    <div class="div1">sth1</div>  
    <div class="div2">sth2</div>  
</div>

CSS： 

.container {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color:black; 
    opacity: 0.92;
}

.div1 {
    background-color: white;
    padding-top: 50px;
    padding-bottom: 50px;
    width:  100%;
    opacity: 1.0;
}
4

1 回答 1

4

不继承不透明度值。相反，它们堆叠。因此，如果您使.container不透明度为 0.92，并且不更改任何其他不透明度，opacity则子元素div1的CSSdiv2默认为 1。然而，这些子元素在视觉上看起来像是 0.92 的不透明度，因为它们在内部container。如果将div1'opacity属性更改为 0.5，则其视觉不透明度将为 0.92 * 0.5 = 0.46。

因此，您不能让子元素比其父元素更不透明。子元素总是看起来至少与其父元素一样透明。

要解决此问题，您可以尝试将子元素移出父元素。您可以使用绝对定位将其定位在父级上，使其看起来像在里面。或者，如果您想要不透明度的唯一原因是使父级的背景颜色透明，您可以使用以下命令指定透明颜色rgba()：

.container {
    background-color: rgba(0, 0, 0, 0.92); /* transparent black */
}
于 2013-06-05T15:52:05.367 回答