html - 背景大小不适用于 100%

Question

我试着用图像做背景，这个image 我有这段代码(引导页面)。

.cover-losos{
  background: url('http://patwoj.hekko24.pl/zdrowie/images/losos.jpg') no-repeat center center;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}

<div class="container-fluid">
   <div class="row">
      <div class="col-md-12 cover-losos">
      </div>
   </div>
</div>

为什么没有显示照片？我究竟做错了什么？

Answer 1

您的问题不是背景。您设置背景的 div 既没有设置 width 也没有设置 height，这意味着背景图像的大小是 0px 的 100%。

尝试为您的 cover-losos div 添加宽度和高度。

.cover-losos {
  background: url('https://placeimg.com/640/480/any') no-repeat center center;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  width: 100%;
  height: 300px;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 cover-losos">
    </div>
  </div>
</div>