0

我有一个 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 标签。原因如下：

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

4

1 回答 1

2

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

<div id="background-wrap">
<div class="img-center">
  <img src="/2012/images/august/neil-armstrong.png" class="feature-image" />
</div>
<!-- More Content --> 
</div>
于 2012-08-27T02:16:42.787 回答