多个背景图像 IE8答案

【问题标题】：Multiple background images IE8多个背景图像 IE8
【发布时间】：2011-05-26 19:49:00
【问题描述】：

是否有任何 jquery 插件（或任何其他方式）强制 IE8 显示多个背景图像？

【问题讨论】：

@mu 太短了——我不知道还能说什么。因为我想拥有多种背景，所以原因非常广泛，我看不出这对回答我的问题有什么帮助。

标签： jquery css internet-explorer jquery-plugins internet-explorer-8

【解决方案1】：

适用于 Internet Explorer 和旧版 Mozilla Firefox 的 CSS3 多背景

这个库通过从样式和链接标签读取 CSS 代码，为 Internet Explorer 6-8 和 Firefox

CSS3 浏览器支持扩展到背景图像、背景位置、背景重复。该库仅实现了自己的速记样式背景属性。

http://plugins.jquery.com/project/multiple-bg

示例用法

包括脚本

所有需要包含的只是 jQuery 库和此脚本，这些功能才能正常工作。不需要额外的 Javascript 编码。缩小后的库只有 8.7kB！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multiple-bgs.js"></script>

编写 CSS

使用这个 Javascript 库读取使用 background 属性的多个背景。请注意如何支持悬停和活动状态。

#ex1 {
    background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right.gif) no-repeat 100% 0, 
                url(middle.gif) repeat-x 0 0;
}
#ex1:hover {
    background: url(middle-hover.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-hover.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-hover.gif) no-repeat 100% 0, 
                url(middle-hover.gif) repeat-x 0 0;
}
#ex1:active {
    background: url(middle-active.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-active.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-active.gif) no-repeat 100% 0, 
                url(middle-active.gif) repeat-x 0 0;
}

【讨论】：

需要下载链接的可以在这里找到：chicowebdesign.com/blog/2010/10/21/…
@Sonner 我在 ie8 中收到以下错误“网页错误详细信息消息：预期对象行：7 字符：1 代码：0 URI：文件：jquery.multiple-bgs.min.js 消息：对象预期行：13 字符：1 代码：0 URI：文件：jquery.multiple-bgs.js
@eric.itzhak 和 Soner 你能解决我上面定义的问题吗
@sonner 下面是我的代码，我用上面的代码用于多个图像......
@sonner 但我得到了上述错误（我在上面的评论中提到），即 chrome 和 ff 显示通常正确的图像你能解决这个谢谢

【解决方案2】：

CSS3 PIE 可能会满足您的需求CSS3 PIE

【讨论】：

css3pie 是一个很棒的小技巧，但我不知道它可以做 CSS 多背景？？？
这不是我以前用过的东西，但我计划很快。查看这里的文档css3pie.com/documentation/supported-css3-features 可以使用 -pie-background 属性来完成。
这很好用。只是一个小问题，请务必在实际的 IE8 浏览器中进行测试 - 如果您尝试使用 IE9 的 IE8 模式，-pie-background 声明将不起作用。（至少在撰写此评论时）

【解决方案3】：

如果不超过3张图片作为背景，可以在css中玩转:before和:after。例如，请参阅此link。

如果您希望 ie7 也能正常工作，您可能需要在头部添加以下内容：

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>

【讨论】：