覆盖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并没有堆叠上下文。