Je rencontre un comportement étrange et j'espère que quelqu'un ici peut expliquer mes résultats.superposition de couleurs sur un comportement div
J'ai deux colonnes avec du texte à l'intérieur qui ont différentes images de fond et j'essaie de mettre des superpositions de couleurs sur chacune d'elles.
La colonne bleue fonctionne correctement, car le texte est en pleine opacité sur la superposition bleue. Le bloc blanc, cependant, modifie l'opacité du texte.
J'ai un JSfiddle (sans images de fond) qui montre le comportement. Je ne sais pas pourquoi le comportement est différent lorsque le CSS est exactement le même à l'exception de la couleur de la superposition. Quelqu'un peut-il faire la lumière sur ce comportement?
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 & 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/
Alors, quel est le problème exactement? – ProEvilz