html - 不透明度表现怪异(css)

Question

我在为 .div1 获取正确的不透明度时遇到了一些问题。我只能使它的不透明度低于 .container 或相同但我希望它更高我想让它达到 1 而不是 0.92。谁能帮我弄清楚如何将它的 .div1 设置为不透明度等级 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，并且不更改任何其他不透明度，则 CSS opacity默认情况下，子元素 div1 和 div2 的个数为 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 */
}