divの動作にカラーオーバーレイが表示される

Question

私はいくつかの奇妙な動作を経験しており、ここで私の結果を説明できるものがあることを期待しています。

私は、内部にテキストを持つ2つの列があり、それぞれ背景イメージが異なり、それぞれにカラーオーバーレイを配置しようとしています。

青色のオーバーレイに対してテキストが完全に不透明になっているため、青い列が正しく機能しています。ただし、白いブロックは、テキストの不透明度を変更します。

私は、動作を示すJSfiddle（サンの背景画像）があります。 CSSがオーバーレイの色を除いてまったく同じであるときに、その動作が異なる理由がわかりません。誰かがこの行動についていくつかの光を当てることができますか？

白い背景を持つテキストはRECE 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; 
} 

*セレクタが欠落しているではありません凍結position: relativeであり、結果としてスタッキングコンテキストは存在しない。