不透明度採用子元素

Question

我有以下覆蓋，需要有背景淡入淡出，但文本和按鈕是完全不透明的1.我試圖移動樣式周圍看看是否會解決它。我看過其他問題，給出了沒有給出預期效果的答案。有什麼建議麼？

<div id="myNav" class="overlay" style="z-index:0.1; background: rgb(26, 35, 126) ; opacity: 0.6;"> 
<div class="w3-container w3-padding-32" style="width:100%;height:100%;margin-top: 0px;margin-bottom: 0px; 
text-align: center;"> 
<h1 style="color: black;">Thank you for visiting our website!</h1> 
<button>Continue to our website</button> 
</div> 
</div> 

在此先感謝！

Answer 1

我已刪除父DIV overlay的opacity並增加透明度剛剛在後颱風格，你可以使用rgba這樣你就可以在第四位值增加透明度，格式是這樣background: rgba(26, 35, 126, 0.6)，請參見下面的HTML

HTML

<div id="myNav" class="overlay" style="z-index:0.1;background: rgba(26, 35, 126, 0.6);"> 
<div class="w3-container w3-padding-32" style="width:100%;height:100%;margin-top: 0px;margin-bottom: 0px; 
text-align: center;"> 
<h1 style="color: black;">Thank you for visiting our website!</h1> 
<button>Continue to our website</button> 
</div> 
</div>