0

.div1 の適切な不透明度を取得するのに問題があります。不透明度を .container よりも低くするか、同じにすることしかできませんが、より高くしたいのですが、0.92 ではなく 1 にしたいと考えています。.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、子要素の CSS はデフォルトで 1div1にdiv2なります。しかし、これらの子要素は の中にあるため、視覚的には 0.92 の不透明度を持っているように見えますcontainer。div1のプロパティを 0.5 に変更opacityすると、視覚的な不透明度は 0.92 * 0.5 = 0.46 になります。

したがって、子要素を親よりも不透明にすることはできません。子要素は常に、少なくともその親と同じくらい透明に見えます。

これを解決するには、子要素を親から移動してみてください。絶対配置を使用して親の上に配置すると、内側にあるように見えます。または、不透明度が必要な唯一の理由が親の背景色を透明にすることである場合は、次を使用して透明色を指定できますrgba()。

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