[英]Background Image being cropped in Internet Explorer
I have set a background that I am expecting to be the width of the screen behind some other divs. 我设置了一个背景,希望它是其他div后面的屏幕宽度。
I have set the z-index to -1 so it appears behind 2 divs which works fine in Chrome however, IE seems to cut the background off at the width of the containers before and after (980px) 我将z-index设置为-1,因此它出现在2 divs后面,这在Chrome中工作正常,但是,IE似乎在容器前后的宽度(980px)处切断了背景
My Code: 我的代码:
.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>
Here is the effect in Chrome: 这是Chrome中的效果:
Here is the effect in Internet Explorer 8: 这是Internet Explorer 8中的效果:
The complete code can be found here: http://www.signatureblindsbrisbane.com.au/ (down the bottom (Signature Partners area) 完整的代码可以在这里找到: http : //www.signatureblindsbrisbane.com.au/ (位于底部(“签名伙伴”区域)下方)
You have a couple of issues with your Z-index. Z索引有几个问题。
First, DOM order originally dictates the Z-index, so the first DIV element is on the bottom (z-index: 1), second in the middle (2), and third on absolute top (3). 首先,DOM顺序最初决定Z索引,因此第一个DIV元素在底部(z索引:1),第二个在中间(2),第三个在绝对顶部(3)。
Second, z-index does not work at all unless you apply a specific position attribute (such as absolute or relative). 其次,除非您应用特定的位置属性(例如绝对或相对),否则z-index根本不起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.