CSS Opacity在不在div时影响文本

Question

嗨，所以我正在测试CSS背景和div不透明度，但出于某种原因，当文本不在div中时，它也会影响文本......

h2文本应该是白色的，因为我用css颜色添加它：白色但不是

我做错了，请解释一下你是否回答了问题

谢谢。

＆＃13;

＆＃13;

.bimg{
  background-size: cover;
  background: transparent no-repeat fixed;
  position: relative;
  width: 100%;
}

.overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2a2d36;
  opacity: .54;
  z-index: 9;
}

#container{
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

#intro{
  vertical-align: middle;
  display: table-cell;
}

#intro h2{
  font-size: 70px;
  line-height: 87px;
  font-weight: 100;
  color: white;
}

＆＃13;

<section class="bimg" style="height: 831px; background-image: url(http://widewallpaper.info/wp-content/uploads/2016/03/Anime-Wallpaper-1920x1080-064.jpg);">
  <div class="overlay"></div>
  <div id="container">
    <div id="intro">
      <h2>Testing this.</h2>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

overlay它位于content之上。将内容更改为相对定位并将z-index更改为更高的值：

.bimg{
  background-size: cover;
  background: transparent no-repeat fixed;
  position: relative;
  width: 100%;
}

.overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2a2d36;
  opacity: .54;
  z-index: 1;
}

#container{
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  z-index: 2;
}

#intro{
  vertical-align: middle;
  display: table-cell;
}

#intro h2{
  font-size: 70px;
  line-height: 87px;
  font-weight: 100;
  color: white;
}

<section class="bimg" style="height: 831px; background-image: url(http://widewallpaper.info/wp-content/uploads/2016/03/Anime-Wallpaper-1920x1080-064.jpg);">
  <div class="overlay"></div>
  <div id="container">
    <div id="intro">
      <h2>Testing this.</h2>
    </div>
  </div>
</section>

Answer 2

您的叠加层定位为绝对值，其z-index值为9，高于您的容器类放置位置：相对于容器和z-index：10。