Question

我希望我的div带有背景图片，以覆盖整个浏览器窗口。我还有另一个包含内容的div。当内容div中的内容充满数据（即填满浏览器窗口）时，图像显示完整。当我清空div的内容时，图像只是部分可见（内容div的高度）。当内容添加到内容div时，会显示更多图像。继承人html：

 <div class="whole">
 <div class="content"> 
    <p>the more content in here, the more of the image is shown</p>
 </div>
 </div>

这是css：

 .whole {
 background: url(tree.jpg) no-repeat center center fixed;

 background-size: cover;
 width:100%;
height:100%;
  }

 .content {
 text-align: center;
 font-family: 'Open Sans', sans-serif;
 color: #fff;
 margin: 40px auto;
background: rgba(22,22,22, 0.5);
width: 100%;
max-width: 960px;
border-radius: 5px;
 padding-bottom: 32px;

}

如果整个类中的div中的图像占用整个浏览器窗口而不管内容div中有多少内容？感谢

Answer 1

设置html的宽度和高度，

＆＃13;

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.whole {
  background: url(http://wac.2f9ad.chicdn.net/802F9AD/u/joyent.wme/public/wme/assets/ec050984-7b81-11e6-96e0-8905cd656caf.jpg?v=55) no-repeat center center fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  margin: 40px auto;
  background: rgba(22, 22, 22, 0.5);
  width: 100%;
  max-width: 960px;
  border-radius: 5px;
  padding-bottom: 32px;
}

＆＃13;

<div class="whole">
  <div class="content">
    <p>the more content in here, the more of the image is shown</p>
  </div>
</div>

＆＃13;

仅当内容位于div中时才会显示背景图像

1 个答案: