在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根本不起作用。