引导图像背景以覆盖容器内的整个宽度

Question

从昨天开始，我试图获得图像在左外而文本 div 仍在容器网格中的效果。我不能使用容器流体，因为文本 div 变得流畅，我不希望它覆盖右侧的整个宽度。有什么建议吗？

代码：https://www.codeply.com/go/vTLom0BFoh

Answer 1

您可以使用container-fluid，然后手动设置右列的样式，使其仅占非流体容器宽度的一半。

这是一个工作演示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.left {
  z-index: 0;
  color: #fff;
}

.left:before {
  background-image: url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=700&q=80&cs=tinysrgb&crop=");
  background-repeat: no-repeat;
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  top: -15px;
  left: -15px;
  bottom: -15px;
}

/*
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
*/

@media(min-width: 576px) {
  .col-not-fluid {
    flex-basis: 270px;
    max-width: 270px;
  }
}

@media(min-width: 768px) {
  .col-not-fluid {
    flex-basis: 360px;
    max-width: 360px;
  }
}

@media(min-width: 992px) {
  .col-not-fluid {
    flex-basis: 480px;
    max-width: 480px;
  }
}

@media(min-width: 1200px) {
  .col-not-fluid {
    flex-basis: 570px;
    max-width: 570px;
  }
}
</style>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 left"></div>
    <div class="col-sm-6 col-not-fluid">
      <h2>Title section</h2>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.</p>
    </div>
  </div>
</div>

注意：解决方案改编自this answer。

Answer 2

使用m-0 到container 表示边距为0px
Bootstrap 4 间距：https://getbootstrap.com/docs/4.0/utilities/spacing/

.left {
  z-index: 0;
  color: #fff;
}

.left:before {
  background-image: url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=700&q=80&cs=tinysrgb&crop=");
  background-repeat: no-repeat;
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  top: -15px;
  left: -15px;
  bottom: -15px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container   m-0">
  <div class="row">
    <div class="col-sm-6 left"></div>
    <div class="col-sm-6">
      <h2>Title section</h2>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.</p>
    </div>

  </div>
</div>

Answer 3

图像未完全显示，然后您使用 .left:before { background-size: contains; } 或 .left:before{ 背景尺寸：封面； } 在 CSS 中它可以解决你的问题

Answer 4

如果您的图像被裁剪，您可以使用

.left:before{background-size: cover;}

但请确保您使用正确的图像以使其看起来不会压缩