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

【问题标题】：Multiple backgrounds - Second image not displaying in IE7 and IE8多个背景 - 第二张图片未在 IE7 和 IE8 中显示
【发布时间】：2015-08-17 05:31:09
【问题描述】：

我有以下代码应该显示两个图像；一个在左上角，一个在右上角。在 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;
}

【问题讨论】：

标签： html css internet-explorer internet-explorer-8 internet-explorer-7

【解决方案1】：

添加更多细节

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

如何使用现代化剂

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

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 将根据浏览器对“background”属性提供的支持，动态创建两个不同的 CSS 类，该库使其易于使用（有条件地）“background”属性。

我希望这能解释用法。

【讨论】：

【解决方案2】：

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

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

【讨论】：