Bootstrap Jumbotron 背景圖像不透明度和寬度和高度？

Question

我有以下要求：

1. 我希望大屏幕的背景圖像適合頁面的寬度和按比例縮放的高度
2. 我希望將大屏幕背景圖像（僅）的不透明度設置為特定值。

我的背景圖片很大： http : //imgur.com/a/qYRGJ

我已經嘗試了網上某處推薦的以下技巧：

<section class="jumbotron">
  <div class="img"></div>

  <div class="container">
    <div class="row">
      <h1 class="display-3">Test</h1>
      <p class="lead">Test</p>
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </p>
    </div>
  </div>
</section>

這是我的 CSS：

section {
  position: relative;
  background-color: transparent !important;
}

section .img {
  position: absolute;
  left:0; top:0;
  background-size: cover;
  min-height: 768px;
  width: 100%;

  opacity: 0.45;
  background-image: url("1.jpg");
  z-index: -1;
}

section .container {
  background-color: transparent;
}

section .container .row {
  background-color: gray;
  padding: 1.5em;
}

目前，這破壞了我的代碼。 在此之后創建另一個會導致該部分顯示在背景圖像上。

有人可以推薦滿足我要求的解決方案嗎？

Answer 1

如果您使用此 CSS，則效果很好。 不過總的來說，最好在 Photoshop 中編輯該照片並在那里設置不透明度，而不是在瀏覽器中進行。

<style>
section {
    position: relative;
    background-color: transparent !important;
}

section .img {
    position: absolute;
    left:0; top:0;
    background-size: cover;
    min-height: 768px;
    width: 100%;
    opacity: 0.45;
    background-image: url("http://i.imgur.com/eFMDsVA.jpg");
    z-index: -1;
}

section .container {
    background-color: transparent;
}

section .container .row {
    padding: 1.5em;
}
.jumbotron {
     background-color: gray}
</style>