多个背景图片IE8

问题描述

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

解决方案

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

此库支持多种背景图片到Internet Explorer 6-8和Firefox< = 3.5通过从样式和链接标签中读取CSS代码。

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

使用示例

strong>

包含脚本

jQuery库和这个脚本为这些功能工作。不需要额外的Javascript编码。缩小的库只有8.7kB！

 < script type =text / javascriptsrc =http：// ajax .googleapis.com / ajax / libs / jquery / 1.4.2 / jquery.min.js>< / script> 
< script type =text / javascriptsrc =jquery.multiple-bgs.js>< / script> 
  

写入CSS

使用此Javascript库读取使用background属性的多个背景。注意悬浮和活动状态的支持情况。

 ＃ex1 {
 background：url（middle.gif）repeat- x 0 0; / *对于不支持的浏览器* / 
 background：url（left.gif）no-repeat 0 0 / /对于CSS3浏览器* / 
 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; / *对于不支持的浏览器* / 
 background：url（left-hover.gif）no-repeat 0 0 / /对于CSS3浏览器* / 
 url（right-hover.gif） ％0，
 url（middle-hover.gif）repeat-x 0 0; 
} 
＃ex1：active {
 background：url（middle-active.gif）repeat-x 0 0; / *对于不支持的浏览器* / 
 background：url（left-active.gif）no-repeat 0 0 / /对于CSS3浏览器* / 
 url（right-active.gif） ％0，
 url（middle-active.gif）repeat-x 0 0; 
} 
  

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

解决方案

CSS3 Multiple Backgrounds for Internet Explorer and legacy Mozilla Firefox

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 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

Example Usage

Including the Script

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>

Writing the CSS

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

这篇关于多个背景图片IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！