Question

我在为.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;
}

Answer 1

不会继承不透明度值。相反，他们堆叠。因此，如果您使.container的不透明度为0.92，并且不更改任何其他不透明度，则子元素div1和div2的CSS opacity默认为1。然而，这些儿童元素在视觉上看起来看起来有0.92的不透明度，因为它们位于container内。如果您将div1的{{1}}属性更改为0.5，则其视觉不透明度将为0.92 * 0.5 = 0.46。

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

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

opacity

不透明的行为怪异（css）

1 个答案: