覆蓋div行爲

Question

我遇到一些奇怪的行爲，我希望這裏有人能解釋我的結果。

我有兩列與文本里面有不同的背景圖像，我試圖把顏色疊加在每個。

藍色列正常工作，因爲文本在藍色覆蓋層上處於完全不透明狀態。然而，白色塊會改變文本的不透明度。

我有一個JSfiddle（無背景圖像），顯示行爲。我不確定爲什麼當CSS與覆蓋圖的顏色例外完全相同時，行爲會有所不同。有人可以闡明這種行爲嗎？

HTML

.white:before { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #fff; 
 
    opacity: 0.88; 
 
} 
 

 
.blue:before { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #002b5d; 
 
    opacity: 0.88; 
 
} 
 

 
.white, 
 
.blue * { 
 
    position: relative; 
 
} 
 

 
.b { 
 
    font-weight: 500; 
 
    font-size: 24px; 
 
    color: #152e54; 
 
} 
 

 
.a { 
 
    font-weight: 500; 
 
    color: #152e54; 
 
    font-size: 30px; 
 
    line-height: 45px; 
 
} 
 

 
.k { 
 
    font-weight: 500; 
 
    font-size: 30px; 
 
    color: #f4f4f4; 
 
    line-height: 45px; 
 
} 
 

 
.l { 
 
    font-weight: 500; 
 
    font-size: 24px; 
 
    color: #f4f4f4; 
 
} 
 

 
.p { 
 
    font-weight: 300; 
 
    font-size: 189x; 
 
    color: #d4d4d4; 
 
    padding: 10px 0; 
 
}

<div class="row sec"> 
 
    <div class="col-md-6 blue promo-cont"> 
 
    <h1 class="k">Mario Cart World Championships</h1> 
 
    <h2 class="l">Split 10 Million Points</h2> 
 

 
    <p class="p"> November 3 &amp; 4 - Win your share of 10 Million Points!</p> 
 
    </div> 
 
    <div class="col-md-6 white promo-cont"> 
 
    <h2 class="b">1 Million Estimated Prize Pool</h2> 
 
    <h1 class="a">Zelda Cup Challenge</h1> 
 

 
    <p class="">Racing’s premier tournament. Play online !</p> 
 
    </div> 
 
</div>

https://jsfiddle.net/so2c0k4x/

Answer 1

你在這裏失蹤

.white, 
.blue * { 
    position: relative; 
} 

的*選擇白色背景的文本不是RECE因此position: relative並沒有堆疊上下文。