問題描述

是否有任何 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 瀏覽器支持擴展到背景圖像、背景位置、背景重復(fù).該庫僅實現(xiàn)了自己的速記樣式背景屬性.

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 屬性的多個背景.請注意如何支持懸停和活動狀態(tài).

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

這篇關(guān)于多個背景圖像 IE8的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！