jquery - 多个背景图片 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

示例用法

包括脚本

所有需要包含的是 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;
}