Question

我是Web开发的新手，在使用bootstrap / CSS时遇到了一些麻烦。我正在尝试在默认的引导巨无霸后面添加背景图片。最重要的是，我似乎也根本无法显示图像。我有点迷茫。任何帮助将不胜感激。

我的代码段如下：

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

Answer 2

检查下面的代码

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

/* background */

.jumbotron {
  font-family: 'Josefin Slab', serif;
  font-size: 17px;
}

.jumbotron .container {
  position: relative;
  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%;
background: url("https://cdn.urlencoder.org/assets/images/url_fb.png") no-repeat center center fixed;
background-size: 100% 100%;
}


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

<div class="jumbotron jumbotron-fluid bg-dark">
  <div class="jumbotron-holder">
    <div class="jumbotron-background">
      hello
    </div>
  </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>

Bootstrap Jumbotron背后的图像

2 个答案: