背景大小不适用于100%

时间:2015-11-24 12:30:52

标签: html css

我尝试用图片制作背景,image 我有这个代码(bootstrap上的页面)。



.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>
&#13;
&#13;
&#13;

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

1 个答案:

答案 0 :(得分:7)

您的问题不是背景。您设置背景的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;