背景大小不适用于100%

Question

我尝试用图像制作背景,这个图像 我有这个代码(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>

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

Answer 1

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

尝试为cover-lososdiv 添加宽度和高度.

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