为什么我看不到背景图片？

Question

我想将图片添加到部分，但它没有显示。

这是该部分的CSS部分：

#start{
  height: 100vh;
  display:block;
  text-align: center;
}

.start-img{
  background-image: url("assets/img/bg.png");
  display:block;

}

.section{
  height: 100vh;
}

这是HTML：

<section id="start">
  <div class="strt-img">

  </div>
</section>

Answer 1

您必须设置height，因为它没有任何内容。 请尝试添加，例如：height: 100px;。

或者，如果您希望这填写部分背景，请将position: relative;应用于这些部分，然后使用：

.strt-img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

这会将它拉伸到部分的宽度和高度。

<强>更新

#start {
    height: 100vh;
    display: block;
    text-align: center;
}

.start-img {
    background-image: url("http://via.placeholder.com/1000x500");
    display: block;
    height: 100%;
}

.section {
    height: 100vh;
}

<section id="start">
    <div class="start-img">

    </div>
</section>

JSFiddle

Answer 2

您需要为.strt-img div添加高度。

由于该元素中没有内容，因此它已完全崩溃。如果您在该div中添加了段落或任何内容，则会看到您的背景图片。