Question

下面是一个简单的代码，我已经在body中实现了多个背景图像，但是这个代码在IE 7和8中不起作用，而它适用于所有其他浏览器。我使用了相对于html文档的PIE.htc，但仍然没有成功。请帮我解决这个例子。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="background: url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x;  behavior: url(http://localhost/mutliple_bg/PIE.htc);
-pie-background:url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; position:relative; zoom:1; z-index:1;">
</body>
</html>

Answer 1

抱歉草率阅读你的问题，只是注意到你的使用馅饼。 PIE不支持BODY元素上的多个背景;

解决方案：为body创建div容器。

Answer 2

仅IE9及更高版本支持多个背景。

Answer 3

使用div位置relative and absolute

我认为这是解决跨浏览器问题的简单方法，希望对此有所帮助......

点击here了解工作小提琴

HTML

<div class="parent">
    <div class="colorLeft"></div>
    <div class="contentArea"></div>
</div>

CSS

.parent {
    float:left;
    width:100%;
    height:200px;
    background-color:#555;
    position:relative;
    z-index:1;
}
.colorLeft {
    width:50%;
    float:left;
    height:200px;
    background-color:blue;
    position:absolute;
    z-index:-1;    
}
.contentArea {
    width:400px;
    background-color:#fff;
    height:180px;
    margin:10px auto;
}

多个背景图像在IE8和IE7中不起作用

3 个答案: