在Internet Explorer中裁剪的背景图像

Question

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

我已将z-index设置为-1，因此它显示在2个div之后，在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-index存在一些问题。

首先，DOM顺序最初指示Z-index，因此第一个DIV元素位于底部（z-index：1），第二个位于中间（2），第三个位于绝对顶部（3）。

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