在Internet Explorer中裁剪背景图片

Question

我设置了一个背景，希望它是其他div后面的屏幕宽度。

我将z-index设置为-1，因此它出现在2 divs后面，这在Chrome中工作正常，但是，IE似乎在容器前后的宽度（980px）处切断了背景

我的代码：

.container { 
  width: 980px; 
  background: transparent; 
}
.container-footer { 
  position: relative;
  background: url(images/footer-bg.png) no-repeat center top; 
  width: 100%;
  z-index: -1;
  margin-top: -100px;
  height: 200px;
}

<div class="container"> .. content .. </div>
<div class="container container-footer"></div>
<div class="container"> .. content .. </div>

这是Chrome中的效果：

这是Internet Explorer 8中的效果：

完整的代码可以在这里找到： http : //www.signatureblindsbrisbane.com.au/ （位于底部（“签名伙伴”区域）下方）

Answer 1

Z索引有几个问题。

首先，DOM顺序最初决定Z索引，因此第一个DIV元素在底部（z索引：1），第二个在中间（2），第三个在绝对顶部（3）。

其次，除非您应用特定的位置属性（例如绝对或相对），否则z-index根本不起作用。