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

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

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

的一部分

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

Answer 2

添加更多详细信息

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

如何使用现代化剂

安装Modernizr，从这个页面下载文件。然后，在您网站的 head 标签上，将 link 添加到文件中。例如：

Modernizr 没有做任何“魔法”。它只是测试浏览器并评估其支持二十多种不同 CSS3/HTML5 功能的能力。基于此检查的结果，库向网页元素添加了一组 CSS 类（以及一些 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 类，基于浏览器为“背景”提供的支持属性，该库使它变得容易有条件地使用“背景”属性.

我希望这能解释用法。

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

Multiple backgrounds - Second image not displaying in IE7 and IE8

html

css

internet-explorer

internet-explorer-8

internet-explorer-7