不透明行爲怪異（css）

Question

我在爲.div1獲取正確的不透明度時遇到了一些問題。我只能使它比.container更低的不透明度，或者相同，但我希望它更高，我希望它達到1而不是0.92。任何人都可以幫助我弄清楚如何獲得它.div1 opacity 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的opacity屬性更改爲0.5，則其視覺不透明度將爲0.92 * 0.5 = 0.46。

因此，您不能讓子元素比其父元素更不透明。子元素總是至少與父元素一樣透明。

要解決這個問題，可以嘗試將子元素移出父項。您可以使用絕對定位將其放置在父級上方，使其看起來像在裏面。另外，如果你想不透明度的唯一原因是爲了使父母的背景色透明，你可以使用rgba()指定透明色：

.container { 
    background-color: rgba(0, 0, 0, 0.92); /* transparent black */ 
}