Question

我的background-image设置存在问题。有人知道为什么.box-3没有推出.box-2吗？

＆＃13;

 .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;
      
    }

＆＃13;

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

＆＃13;

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;
}

设置背景图像

1 个答案: