Bootstrap Jumbotron 背景图像不透明度和宽度和高度？答案

【问题标题】：Bootstrap Jumbotron Background image Opacity and width and height?Bootstrap Jumbotron 背景图像不透明度和宽度和高度？
【发布时间】：2020-01-13 10:03:35
【问题描述】：

我有以下要求：

我希望 jumbotron 的背景图片适合页面的宽度和要按比例缩放的高度
我希望将 jumbotron 背景图像的不透明度（仅）设置为特定值。

我的背景图很大：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;
}

目前，这破坏了我的代码。在此之后创建另一个会导致该部分显示在背景图像上。

有人可以推荐满足我要求的解决方案吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：