CSS 使覆盖背景下方的文本不透明/可见

Question

My Result

Desired Result

我在巨大的背景图片上有一个不透明度为 0.6 的叠加颜色；但是这个叠加层使文本变暗(中间的 h1 和 h2)

.jumbotron {
  position: absolute;
  width: 100%;
  height: 57.5%;
  background: url("../img/bg2.jpg") no-repeat center center fixed;
  padding-top: 5%;
  text-align: center;
}
.jumbotron h1 {
  display: inline-block;
  padding: 10px;
  border: 5px solid white;
}
.bg-overlay {
  position: absolute;
  left: 0;
  right: 0;
  height: 57.5%;
  z-index: 0;
  background: #424252;
  opacity: .6;
}

<header>
  <div class="main-header">
    <div class="jumbotron">
      <div class="container">
        <div class="content">
          <!-- This whole DIV I want to be visible -->
          <h2>AN EASY WAY TO BUILD A WEBSITE</h2>
          <hr/>
          <h1>WITH MINT</h1>
        </div>
        <!-- end content-->
      </div>
      <!-- end container-->
    </div>
    <!-- end jumbotron-->
    <div class="bg-overlay"></div>
    <!-- This is the overlay -->
  </div>
  <!-- end main-header-->
</header>

为 navbar-brand 和 anchor 元素设置不透明度是可行的，但我无法为内容做到这一点

Answer 1

将 z 索引 调整为 -1，然后单独为文本放置一个 div，然后处理不透明度。这是一个fiddle

.navbar-brand {
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
}
.navbar-default {
  background: transparent;
  border: 0;
  padding-top: 10px;
}
.nav.navbar-nav.navbar-right li a {
  color: #eaecf1;
  opacity: 0.9;
}
.jumbotron {
  position: absolute;
  width: 100%;
  height: 57.5%;
  background: url("../img/bg2.jpg") no-repeat center center fixed;
  padding-top: 5%;
  text-align: center;
}
.content {
  background: red;
  background-size: contain;
}
.jumbotron h1 {
  display: inline-block;
  padding: 10px;
  border: 5px solid white;
}
.text {
  opacity: .6
}
.bg-overlay {
  position: absolute;
  left: 0;
  right: 0;
  height: 57.5%;
  z-index: -1;
  background: #424252;
}

<header>
  <div class="main-header">
    <div class="container">
      <div class="row">
        <div class="col-md-2">
          <a href="index.html" class="logo"></a>
        </div>
        <div class="col-md-10">
          <nav class="navbar navbar-default navbar-fixed-top">
            <!-- here is the navbar code -->
          </nav>
        </div>
      </div>
      <!-- end row -->
    </div>
    <!-- end container -->
    <div class="jumbotron">
      <div class="container">
        <div class="content">
          <div class="text" <h2>AN EASY WAY TO BUILD A WEBSITE</h2>
            <hr/>
            <h1>WITH MINT</h1>
          </div>
        </div>
        <!-- end content-->
      </div>
      <!-- end container-->
    </div>
    <!-- end jumbotron-->
    <div class="bg-overlay"></div>
    <!-- This is the overlay -->
  </div>
  <!-- end main-header-->