Question

我遇到了一些奇怪的行为，我希望这里有人可以解释我的结果。

我有两列文字里面有不同的背景图片，我试图在每个列上添加颜色。

蓝色列工作正常，因为文本在蓝色叠加层上完全不透明。但是，白色块会改变文本的不透明度。

我有一个显示行为的JSfiddle（没有背景图片）。我不确定为什么当CSS完全相同时，行为是不同的，除了叠加层的颜色。有人可以对这种行为有所了解吗？

HTML

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

https://jsfiddle.net/so2c0k4x/

Answer 1

您错过了*选择器

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

具有白色背景的文字未收到position: relative，因此没有堆叠上下文。

div行为上的颜色叠加

1 个答案: