多个背景图像IE8

Question

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

Answer 1

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

该库通过从样式和链接标记中读取CSS代码，将多个背景图像支持到Internet Explorer 6-8和Firefox＆lt; = 3.5。

CSS3浏览器支持扩展到background-image，background-position，background-repeat。此库仅为速记样式的背景属性实现自己的属性。

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

Answer 2

CSS3 PIE可能会为您寻找CSS3 PIE

Answer 3

如果背景图片不超过3张，您可以在css中的:before和:after周围玩游戏。例如，见link。

如果你想让ie7表现得好，你可能需要在头部添加以下内容：

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