背景大小不适用于100％

Question

我尝试用图片制作背景，image 我有这个代码（bootstrap上的页面）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;