css - 背景图像的设置

Question

我的 background-image 设置有一些问题。 有人知道为什么 .box-3 没有把 .box-2 推开吗？

 .box-1 {
      height: 250px;
      width: 100%;
      background-image: url(https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-203);
    }

    .box-2 {
      width: 100%;
      height: 50px;
      background-color: #000;
      color: #fff;
      
    }

   


   

<div class="box-1">
<div class="row">
<div class="col-lg-6">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur 
        </div>
        <div class="col-lg-6">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur 
        </div>
        </div>
        </div>

    <div class="box-2">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>

Answer 1

box-1 的最小高度阻止它变得更高，将 height: 250px 更改为 min-height: 250px

.box-1 {
    min-height: 250px;
    width: 100%;
    background-image: url(https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-203);
}

.box-2 {
    width: 100%;
    height: 50px;
    background-color: #000;
    color: #fff;
    float: left;
}