使用變換的背景文字的CSS透明度問題

Question

我在包含文本的其他一些div（.textDisplay）前面有一個彩色的半透明div（.box）。其中一個背景div（左側）正確顯示，文字由於透明div覆蓋在上面而褪色。另一個，根本不會消失。我希望兩個div都像左邊那樣顯示。

編輯：我不能修改HTML的結構（它由Elm以嵌套方式生成）。有沒有辦法只用CSS來做到這一點？

編輯2：由於transform屬性，這是堆棧上下文問題。查看我的答案獲取更多詳情。

.textDisplay { 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.box { 
 
    width: 200px; 
 
    padding: 20px; 
 
    background-color: #8CA8DA; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: 20px; 
 
    transform: translateY(-50%); 
 
    opacity: 0.8; 
 
} 
 

 
.behind { 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;"> 
 
    <div class="content"> 
 
    <div> 
 
     <div class="textDisplay">Test Text 0</div> 
 
     <div class="box" style="z-index: 100;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;"> 
 
    <div class="content"> 
 
    <div> 
 
     <div class="textDisplay">Test Text 1</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

的transform屬性創建一個新的stacking context。正如鏈接文章所解釋的那樣，這個堆疊環境然後是自動的（作爲一個單獨的東西）併入它的父級堆棧上下文中。其中定義的z-index不能超越上下文。有文章說明這更好的圖表。

而不是使用transform: translate(-50%, -50%);進行居中，我們可以使用left: -50%; top: -50%;，如修改後的代碼片段所示。必須有一個具有所需寬度和高度的div（.behind），他們的左上角是我們希望目標div的中心所在的位置。有關如何實現目標div居中的示例，請參閱.content類。

一旦div以替代方法居中，所有內容都處於相同的堆棧上下文中。現在，在所需元素（或其中的一個子元素，如代碼段中）上簡單z-index: 100將使其高於其餘部分，實現所需的透明度效果。

.textDisplay { 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.box { 
 
    width: 200px; 
 
    padding: 20px; 
 
    background-color: #8CA8DA; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: 20px; 
 
    transform: translateY(-50%); 
 
    opacity: 0.8; 
 
} 
 

 
.content { 
 
    left: -50%; 
 
    top: -50%; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; /* or relative */ 
 
} 
 

 
.behind { 
 
    position: absolute; 
 
    /*transform: translate(-50%, -50%); REMOVED*/ 
 
}

<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;"> 
 
    <div class="content"> 
 
    <div> 
 
     <div class="textDisplay">Test Text 0</div> 
 
     <div class="box" style="z-index: 100;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;"> 
 
    <div class="content"> 
 
    <div> 
 
     <div class="textDisplay">Test Text 1</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

喜歡這個？

.textDisplay { 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.box { 
 
    width: 200px; 
 
    padding: 20px; 
 
    background-color: #8CA8DA; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: 20px; 
 
    transform: translateY(-50%); 
 
    opacity: 0.8; 
 
} 
 

 
.behind { 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;"> 
 
    <div class="content"> 
 
    <div> 
 
     <div class="textDisplay">Test Text 1</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;"> 
 
    <div class="content"> 
 
    <div> 
 
     <div class="textDisplay">Test Text 0</div> 
 
     <div class="box" style="z-index: 100;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

放.behind.box之外。我調整了一下CSS來演示，但你會明白。

.textDisplay { 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.box { 
 
    width: 200px; 
 
    padding: 20px; 
 
    background-color: #8CA8DA; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 15%; 
 
    margin-left: 20px; 
 
    transform: translateY(-50%); 
 
    opacity: 0.8; 
 
} 
 

 
.behind { 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="box" style="z-index: 100;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus. 
 
</div> 
 
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;"> 
 
    <div class="content"> 
 
    <div> 
 
     <div class="textDisplay">Test Text 0</div>   
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;"> 
 
    <div class="content"> 
 
    <div> 
 
     <div class="textDisplay">Test Text 1</div> 
 
    </div> 
 
    </div> 
 
</div>