CSS在叠加层下方生成文本bg opaque / visible

Question

My Result

Desired Result

我的背景图片上有一个0.6不透明度的叠加颜色;但是这个叠加会使文本变暗（h1和h2从中间开始）

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

赋予导航栏品牌和锚点元素不透明效果，但我无法为内容进行操作

Answer 1

将z index调整为-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-->

Answer 2

将叠加层放在:: after选择器中。 不透明度将用于整个div并且不会用z-index解决。 相反，你可以使用:: after选择器将不透明层叠加在backgorund图像的顶部。

此链接可能会帮助您：https://css-tricks.com/snippets/css/transparent-background-images/