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

Question

有人可以向我解释一下如何在我在图像上创建的蓝色叠加层上方显示文本 "I would like to go" 和 "select"，以便它们不会显示为灰色吗？（请看图片）。我知道我可以使用 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 设置为文本的parent。所以它也适用于它的children。因此文本显示为灰色。

这样做： 您始终可以在后台使用多个背景： 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

我在这里看到你设置了：

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

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

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

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

Answer 3

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

.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% 透明的 "blueish" 颜色并将其放在图像上。

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

快速回答是：

1) 删除 opacity: 0.57;

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

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

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

How do I show child elements in front of parent element using z-index and opacity?

html

css

overlay

z-index

opacity