CSS背景图像在其他内容之上？ （使用封面时）

Question

我有一个CSS背景图片，我用它来填满整个屏幕。我正在使用cover以及一些IE回退。加载背景图片时，它会覆盖页面上的所有内容，我无法弄清楚原因。这是代码：

的 CSS： 的

#background-wrap{ 
background: url(/2012/images/august/moon-background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* Cover for IE 7/8 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/2012/images/august/moon-background.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/2012/images/august/moon-background.jpg', sizingMethod='scale');
/* End Cover for IE 7/8 */
background-size: cover;
background-color: transparent !important;
position:fixed;
top: 0;
left: 0;
width: 100%;
height:100%;
max-width:3000px;
max-height:1500px;
z-index:1;  
} 

.img-center{ 
    text-align: center;
    z-index:9999;
}

的 HTML： 的

<div class="img-center">
  <img src="/2012/images/august/neil-armstrong.png" class="feature-image" />
</div>
<!-- More Content --> 
<div id="background-wrap"></div>

我不确定为什么这不起作用。

注意：出于与IE 8及以下版本兼容的原因，我不会将背景包装CSS分配给body或html标记。原因如下：

  

任何尝试使用上述IE过滤器且出现滚动条或死链接或其他任何问题的人都应该尝试不在html或body元素上使用它们。而是一个100％宽度和高度的固定位置div。

Answer 1

你需要将你的背景包裹在内容之外，而不是在它之后。

<div id="background-wrap">
<div class="img-center">
  <img src="/2012/images/august/neil-armstrong.png" class="feature-image" />
</div>
<!-- More Content --> 
</div>