Question

我有以下代码，它应该显示两个图像;一个在左上角，一个在右上角。在IE7和IE8中，仅显示左上角的图像。

<div id="header"></div>

#header {
    background-image: url('img/image1.png'), url('img/image2.png');
    background-position: left top, right top;
    background-repeat: no-repeat;
    background-color: #97C032;
}

Answer 1

添加更多详情

您可以使用Mordenizer帮助旧浏览器优雅地降级http://modernizr.com/docs/#features-css

如何使用mordenizer

安装Modernizr，从此页面下载文件。然后，在您网站的head标签上，添加指向该文件的链接。例如：

Modernizr没有做任何“魔术”。它只是测试浏览器并评估其支持20多种不同CSS3 / HTML5功能的能力。根据此检查的结果，库将向网页元素添加一组CSS clases（以及一些JavaScript对象），以指示浏览器支持是否为给定功能。

例如，如果你的css看起来像这样

#header {
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
}

使用Modernizr，您的CSS看起来会像这样：

#header{
    background: url(background-one.png) top left repeat-x;
}
.multiplebgs #header{
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
}

Modernizr将动态创建两个不同的CSS类，基于浏览器为“背景”属性提供的支持，该库使其易于使用 - 有条件地 - “背景”属性。

我希望这能解释用法。

Answer 2

使用逗号分隔语法的多个背景图像是CSS3模块和not supported in IE7 and IE8的一部分。

要在旧版浏览器中实现此效果，您需要将背景应用于多个定位元素。

多个背景 - 在IE7和IE8中不显示第二个图像

2 个答案: