其他内容之上的 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 及以下版本兼容的原因，我不会将 background-wrap CSS 分配给 body 或 html 标签。原因如下:

Anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.

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>