Bootstrap 将背景图像添加到部分答案

【问题标题】：Bootstrap adding background images to a sectionBootstrap 将背景图像添加到部分
【发布时间】：2022-01-10 22:43:40
【问题描述】：

所以我一直在尝试将图像添加到 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

【问题讨论】：

标签： javascript html jquery css bootstrap-4

【解决方案1】：

如果您希望背景图片位于 row 类中，则将其放入其中，而不是将其放入您的 id 元素 bg-img 中。检查下面的 sn-p 以供参考。

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

【讨论】：

您好，感谢您的帮助！我用你的代码更新了我的 Codepen，但它不起作用。背景图像仍然是正方形，并且不是 100% 的宽度。 codepen.io/amyscotteng/pen/oNGaZzx
@metalcoder 这是因为您在 div 容器上使用的引导类。见此链接：codepen.io/ypinbong/pen/OJxBmoK
问题是如果您删除容器，则内容不再以页面为中心，也不再响应。 ://
@metalcoder 你可以让.marketing 自己响应。如果你不知道怎么做，那么我只能告诉你在你的页面上使用inspect element，并检查.container bootstrap 类的哪些属性导致了你不想要的行为。之后，您可以用另一个类覆盖它，将!important 添加到您自己的值中通常可以解决问题。
我一直在避免使用 !important 但我认为这可能是一个可行的解决方案。我真的很感谢你的帮助，你很好！我已经继续并将您的答案标记为正确的答案，因为它有效并可以帮助他人。非常感谢:)

【解决方案2】：

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

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

【讨论】：

是横向宽度，不是纵向。不过，谢谢！