html - 可调整大小的 Jumbotron BG 图像，不会显示

Question

可能是个愚蠢的问题，但我正在尝试用 bgimage 修复我的 Jumbotron header 。它之前确实有效，但在调整大小时图像被压扁了。找到了一个解决方法，但现在它有点不再出现了:

<div class="container">
    <div class="row">
        <div class="col-md-12 jumbotron" id="jumbotronBG">
            <div class="text-center">
                  <h1>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA</h1>
                  <a href="#services" class="btn btn-md btn-danger">SERVICES</a>
                  <a href="#companies" class="btn btn-md btn-success">COMPANIES</a>
            </div>
        </div>
    </div>

 .jumbotronBG {
  background: url('../img/bg.jpg') no-repeat center center !important;
  position: fixed !important;
  width: 100% !important;
  height: 350px !important; /*same height as jumbotron */
  top:0 !important;
  left:0 !important;
  z-index: -1 !important;
}

.jumbotron {
  margin-bottom: 40px !important;
  height: 350px !important;
  color: white !important;
  text-shadow: black 0.1em 0.3em 0.3em !important;
  background:transparent !important;

}

Answer 1

您的 CSS 中有一个 .jumbotronBG 类，但您没有在 HTML 中使用它。

只需将 CSS 文件中的“.jumbotronBG”类定义更改为:“#jumbotronBG”，样式就会正确应用。

您也可以将背景样式放在“.jumbotron”类定义中，但如果您在元素中使用多个超大屏幕，它们将具有相同的自定义背景，这可能不是您想要的行为。