我有 2 個 div 元素，背景顏色設定覆寫在另一個帶有內容的 div 之上。在 case-1 覆寫不是內容 div 的兄弟，因此它允許用戶看到背景文本。在案例 2 中，覆寫層是內容 div 的兄弟，因此它不會向用戶顯示文本。
情況1
<div class="overlay"></div>
<div class="example-container">
<div class="child1">
Case 1 - Sample Text 1
</div>
</div>
案例 2
<div class="child1">
Case 2 - Sample text 2
</div>
<div class="overlay">
</div>
示例 JSfiddle 來模擬 2 個場景。
知道為什么 html 中的這種行為嗎？我們如何使帶有背景顏色的覆寫 div（案例 2）始終允許文本透明度。
uj5u.com熱心網友回復：
這里的問題是 div 在文本上呈現。這可以通過為疊加層設定 -1 的 z-index 屬性來輕松解決。這使得 div 在文本下呈現，讓您可以看到它。
示例覆寫CSS
.overlay {
position: absolute;
background-color: gray;
top:0;
left:0;
width: 100px;
height: 100px;
z-index: -1;
}
或者，因為您希望它覆寫（如果您實際上不這樣做，那是一個非常具有誤導性的名稱）只需將不透明度設定為較低
.overlay {
position: absolute;
background-color: gray;
top:0;
left:0;
width: 100px;
height: 100px;
opacity: 0.5;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361704.html