多个背景图像 IE8

Posted 2023-03-06

【中文标题】多个背景图像 IE8

【英文标题】：Multiple background images IE8

【发布时间】：2011-05-26 19:49:00

【问题描述】：

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

【问题讨论】：

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

【参考方案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>