Bootstrap 向部分添加背景图片

Question

所以我一直在尝试将图像添加到 Bootstrap 4 中的一行。问题是它只占据了部分的正方形而不是整行。我相信我以前做过，但我不记得我是怎么做到的（当然）。我认为这很容易完成，但我想不是。到目前为止，这是我的代码：

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

#bg-img {
  background-color: #E6F1FF;
  background-image: url('http://placekitten.com/600/800');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 20%;
  background-size: cover;
  color: #323840;
  height: 1148px;
 
  
 
  
 
}

.value-heading {
  color: #323840;
  text-align: center;
  font-size: 34px;
  font-family: 'Inter-SemiBold', Arial, sans-serif;
  font-weight: 600;
  line-height: 41.15px;
}

.value-description {
  font-family: 'Inter-Regular', Arial, sans-serif;
  color: #323840;
  text-align: center;
  font-size: 24px;
  line-height: 36px;
  
}

.section-heading {
  color: #043B7C;
  text-align: center;
  font-size: 46px;
  font-family: 'Inter-Medium', Arial, sans-serif;
  font-weight: 500;
  line-height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
      <div class="container marketing" >
      
        <div id="bg-img">
          <div class="pricing-header mx-auto text-center" >
            <h1 class="display-4">header</h1>

          </div>


        <div class="row">
          
          
          <div class="col-lg-4 ml-n5">
            <img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
              <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
    
          </div>

          <!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
            <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
    
          </div>
          <!-- /.col-lg-4 -->

          <div class="col-lg-4">
            <img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
            <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
    
          </div>
          <!-- /.col-lg-4 -->
          
        </div>
          
        <div class="row">
          
          
          <div class="col-lg-4 ml-n5">
            <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
              <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
    
          </div>

          <!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
            <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
    
          </div>
          <!-- /.col-lg-4 -->

          <div class="col-lg-4">
            <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
            <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
    
          </div>
          <!-- /.col-lg-4 -->
          
        </div>  
          
          
          
        </div>
        <!-- /.row -->
        
        </div>
  </main>

Link to Codepen

Answer 1

我没有很好地理解你的问题，但如果你问的是背景，为什么它没有占据整个部分，我相信会发生这种情况，因为你选择了肖像图像，你必须使用风景图像

background-image: url(https://www.adorama.com/alc/wp-content/uploads/2018/11/landscape-photography-tips-yosemite-valley-feature.jpg);

Answer 2

如果您希望背景图片出现在 row class 上，请将其放在那里，而不是将其放在您的 ID 元素 bg-img 中。查看下面的代码片段以供参考。

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

.row {
  background-color: #E6F1FF;
  background-image: url('http://placekitten.com/600/800');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 20%;
  background-size: cover;
  color: #323840;
  height: 1148px;
  width: 100%;
  margin: 0;
}

.value-heading {
  color: #323840;
  text-align: center;
  font-size: 34px;
  font-family: 'Inter-SemiBold', Arial, sans-serif;
  font-weight: 600;
  line-height: 41.15px;
}

.value-description {
  font-family: 'Inter-Regular', Arial, sans-serif;
  color: #323840;
  text-align: center;
  font-size: 24px;
  line-height: 36px;
  
}

.section-heading {
  color: #043B7C;
  text-align: center;
  font-size: 46px;
  font-family: 'Inter-Medium', Arial, sans-serif;
  font-weight: 500;
  line-height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
      <div class="marketing" >
        <div id="bg-img">
          <div class="pricing-header mx-auto text-center" >
            <h1 class="display-4">header</h1>
          </div>
        <div class="row">
          <div class="col-lg-4 ml-n5">
            <img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
              <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
          </div>
          <!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
            <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
          </div>
          <!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
            <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
          </div>
          <!-- /.col-lg-4 -->
        </div>
        <div class="row">
          <div class="col-lg-4 ml-n5">
            <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
              <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
          </div>
          <!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
            <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
          </div>
          <!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="#" alt="Generic placeholder image" width="200" height="200">
            <h2 class="mt-3 value-heading">header</h2>
              <p class="value-description">info</p>
          </div>
          <!-- /.col-lg-4 -->
        </div>  
        </div>
        <!-- /.row -->
        </div>
  </main>

Bootstrap 向部分添加背景图片

Bootstrap adding background images to a section

html

javascript

css

jquery

bootstrap-4