Question

我有以下要求：

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

我尝试过在线推荐的以下技巧：

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

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

1 个答案: