如何使用 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;
}

opacity:0.57 设置为文本的父级。所以它也适用于它的孩子。因此文本看起来是灰色的。

这样做： 您始终可以在 background: of css 中使用多个背景。

所以只需使用 linear-gradient 属性在图像背景上叠加颜色即可。

在 .panorama 中替换你的背景：

style="background:linear-gradient(rgba(133,216,206,0.57),rgba(133,216,206,0.57)), url({{route('cacheImage', ['newDesign', 'panorama.png']) }}) no-repeat; background-size:cover; background-position:center;"

那么最终代码将是：

<section class="panorama" style="background:linear-gradient(rgba(133,216,206,0.57),rgba(133,216,206,0.57)), 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 -->

和 改变你的CSS。

.panorama-overlay {
  min-height:900px;
}

希望这会有所帮助。

更新

.back
{
  text-align:center;
  height:200px;
  background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("http://cdn.p-r-i.org/wp-content/uploads/2012/09/09120259/Meetings2.jpg") no-repeat center;
}
.title 
{
  color:white;
  text-align:center;
  vertical-align: middle;
  line-height:200px;
  font-family: 'Lato', sans-serif;
}

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
	<div class='back'>
		<h1 class='title'>yevadura ?</h1>
	</div>
</body>
</html>

Answer 2

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

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

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

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

快速回答是：

1) 删除opacity: 0.57;

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

3) 将背景中的不透明度调整为您喜欢的方式

Answer 3

我在这里看到你设置的：

background: rgba(133,216,206,0.57);
  opacity: 0.57;

所以你设置了背景的不透明度和 DOM 中所有子项的不透明度；说： 第一个设置风格化元素本身的不透明度，第二个设置元素和其他东西，所以它们不能互换。 尽管它们可能一起使用，但我在这里看不到该实用程序。 我最好用

background: rgba(133,216,206,0.57);

单独，为了解决childs的不透明问题..