html - 如何使用 z-index 和不透明度在父元素前面显示子元素？

Question

有人可以向我解释如何在我在图像上创建的蓝色叠加层上方显示我的文本“我想去”和“选择”，以便它们不会显示为灰色吗？ (请看图片)。我知道我可以使用 z-index 和不透明度来实现这一点，但是这些文本元素是我的叠加层的子元素，而且我读到你不能在父元素前面设置一个子元素。我将如何在我的代码中解决这个问题？

这是我的 html/css:

.panorama {
  height:100vh;
  min-height:900px;
}

.panorama-overlay {
  min-height:900px;
  background: rgba(133,216,206,0.57);
  opacity: 0.57;
}

.panorama-activity-select-text {
  color: #ffffff;
  font-family: Futura;
  font-size: 38px;
  font-weight: 700;
  text-transform: uppercase;
  text-align:center;
  /*line-height: 450px;*/
  display:inline;
  margin-left:2em;
}

.panorama-activity-select {
  color: #ffffff;
  font-family: Futura;
  font-size: 27px;
  font-weight: 700;
  text-transform: uppercase;
  border: 5px solid #ffffff;
  text-align:center;
  width: 424px;
  height: 57px;
  display:inline-block;
  vertical-align:middle;
  padding-top:0.2em;
  margin-left:3em;
  cursor:pointer;
}

.select-activity-arrow {
  position:absolute;
  right:18em;
  top:-3.7em;
  cursor:pointer;
}

.build-roadtrip-text {
  width: 258px;
  height: 42px;
  color: #ffffff;
  font-family: Futura;
  font-size: 17px;
  font-weight: 700;
  text-align:center;
  line-height:35px;
  margin-top:3em;
  border: 2px solid #ffffff;
  left:50%;
  transform: translateX(-50%);
  cursor:pointer;
}

<section class="panorama" style="background: url({{route('cacheImage', ['newDesign', 'panorama.png']) }}) no-repeat; background-size:cover; background-position:center;">
    <section class="panorama-overlay">
      <div class="vertical-center">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <p class="panorama-activity-select-text">I WOULD LIKE TO GO</p>
            </div>
            <div class="col-md-6">
              <p class="panorama-activity-select">SELECT</p>
              <img src="{{route('cacheImage', ['newDesign', 'select-activity-arrow.png']) }}" class="select-activity-arrow"/>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-offset-6">
            <p class="build-roadtrip-text">BUILD MY ROAD TRIP</p>
          </div>
        </div>
      </div>
    </section>
  </section><!-- panorama navigation section end -->

Answer 1

这是你犯了一个常见错误的地方

.panorama-overlay {
  min-height:900px;
  background: rgba(133,216,206,0.57);
  opacity: 0.57;
}

让我们看看 rgba(133,216,206,0.57) - 它是一个带有 alpha channel 的颜色指示器，它指定颜色本身的不透明度，所以最后一个字母“a”(在“rgba”中") 在该指标值的末尾为 0.57。通过在您的 CSS 中声明它，您可以创建一个 57% 透明的“蓝色”颜色并将其放在您的图像上。

但是，您为此元素放置了另一个选项 - 整体不透明度声明为 opacity: 0.57。通过这种方式，您可以使背景的“蓝色”颜色“蓝色”增加 57%，并且 panorama-overlay 中的所有元素的透明度增加 57%。

快速回答是:

1) 移除不透明度:0.57;

2) 制作背景:rgba(133,216,206,0.23);

3) 调整背景的不透明度到你喜欢的方式