html - Bootstrap Jumbotron 背后的图像

Question

我是网络开发的新手，在使用 bootstrap/CSS 时遇到了一些麻烦。我试图在默认 Bootstrap 超大屏幕后面有一个背景图像。最重要的是，我似乎也根本无法显示图像。我有点迷路了。任何帮助将不胜感激。

我的代码片段如下:

@import "bootstrap-sprockets";
@import "bootstrap";

/* background */
.jumbotron {
    font-family: 'Josefin Slab', serif;
    font-size: 17px;
}
  
.jumbotron .container {
    position:relative;
    z-index:2;
    padding:2rem;
    background: rgb(231, 231, 231);
    border-radius: 17px;
}
  
.jumbotron-background {
    object-fit: cover;
    font-family: 'object-fit: cover;';
    position: absolute;
    top:0;
    z-index:1;
    width:100%;
    height:100%;
}

.center {
    text-align: left;
    font-size: 17px;
    position: relative;
    overflow: hidden;
}

.imgBg {
    content: url("../images/sw_web_backdrop.jpg");
}

...

<div class="jumbotron jumbotron-fluid bg-dark">
  
  <div class="jumbotron-background">
    <img class="imgBg" alt="smallworld network"/>
  </div>

  <div class="container">
    <h1> [content]</h1>
    <h2>[content]</h2>
    <p>
    [content]
    </p>  

    <div id="surveyContainer">
      <%= javascript_include_tag('survey_jquery.js') %>
      <%= javascript_include_tag('mvp_survey.js') %>
    </div>
  </div>
</div>

Answer 1

将你的超大屏幕包裹在一个 <div class="jumbotron-holder>" 中你可以使用 background要设置的属性 background-image

@import "bootstrap-sprockets";
@import "bootstrap";

/* background */

.jumbotron {
  font-family: 'Josefin Slab', serif;
  font-size: 17px;
  position: relative;
  z-index: 2;
  background: rgb(231, 231, 231);
  border-radius:20px!important  
}

.jumbotron-holder {
  background: url(https://www.w3schools.com/bootstrap4/la.jpg) no-repeat center;
  background-size: cover;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="jumbotron-holder p-5">
    <div class="container">
     <div class="jumbotron jumbotron-fluid p-4">
      <h1> [content]</h1>
      <h2>[content]</h2>
      <p>
        [content]
      </p>

      <div id="surveyContainer">
        <%= javascript_include_tag('survey_jquery.js') %>
          <%= javascript_include_tag('mvp_survey.js') %>
      </div>
    </div>
  </div>
</div>