多个背景图像 IE8

2022-01-11 00:00:00 internet-explorer jquery jquery-plugins css internet-explorer-8

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

Is there any jquery plugin (or any other way) to force IE8 to show multiple background images?

推荐答案

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

这个库通过从样式和链接标签中读取 CSS 代码，为 Internet Explorer 6-8 和 Firefox <=3.5 带来了对多个背景图像的支持.

This library brings support for multiple background images to Internet Explorer 6-8 and Firefox <=3.5 by reading the CSS code from style and link tags.

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

CSS3 browser support extends to background-image, background-position, background-repeat. This library only implements its own property for the shorthand style background property.

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

示例用法

包括脚本

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

All that needs to be included is the jQuery library and this script for these features to work. No extra Javascript coding is required. The minified library is only 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 属性的多个背景.请注意如何支持悬停和活动状态.

Multiple backgrounds using the background property are read using this Javascript library. Notice how hover and active states are supported.

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

相关文章