多个背景图像 IE8

Question

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

Answer 1

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

该库通过从样式和链接标记读取 CSS 代码，为 Internet Explorer 6-8 和 Firefox <=3.5 提供对多个背景图像的支持。

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

http://plugins.jquery.com/project/multiple-bg< /strong>

示例用法

包括脚本

需要包含的只是 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 库读取使用背景属性的多个背景。请注意如何支持悬停和活动状态。

#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;
}

Answer 2

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

Answer 3

如果背景图片不超过3张，你可以在css中使用:before和:after。例如，请参阅此链接。

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

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