CSS：跨瀏覽器復(fù)合背景

最近發(fā)現(xiàn)了一個(gè)讓 IE6~8 也能呈現(xiàn) CSS3 Multiple Backgrounds（復(fù)合背景）的方法，當(dāng)時(shí)我小小的震驚了一下。看來 IE6 曾經(jīng)的輝煌不單是微軟的捆綁和網(wǎng)銀的支持造成的，在當(dāng)年，它強(qiáng)大的功能也令其它瀏覽器難以追趕。廢話不說了，先說說 CSS3 里的標(biāo)準(zhǔn)做法。

在 CSS3 標(biāo)準(zhǔn)里，Background 屬性被賦予更加強(qiáng)大的功能，在 CSS2.1 的基礎(chǔ)上，我們可以對(duì)一個(gè)對(duì)象同時(shí)使用多個(gè)背景圖片。例如如下的樣式：

添加符合背景圖片的時(shí)候先從最頂層開始添加，按從高到低的順序?qū)憳邮健４蠹铱梢钥催@個(gè) Demo。可以嘗試用 IE 打開看看效果。

用 IE 打開過 Demo 的同學(xué)可以發(fā)現(xiàn) IE 也能顯示復(fù)合背景了，如果你查看過 DEMO 的源碼，你可以發(fā)現(xiàn)我是通過 IE 濾鏡來實(shí)現(xiàn)的。方法是先用標(biāo)準(zhǔn)的 CSS 加一個(gè)底層的背景，再通過濾鏡添加上一層的背景。整個(gè) Demo 的樣式如下：

IE 的不足

看到當(dāng)年 IE 的強(qiáng)大了吧？最早開始支持復(fù)合背景的 Safari 3.1 誕生以前，IE6 早就可以通過濾鏡制作出這種效果了。但I(xiàn)E也存在明顯的不足：

• 本例使用的濾鏡沒有提供調(diào)整圖片位置的參數(shù)，至少我在 MSDN 的技術(shù)文檔里沒找到。
• 目前 IE 只能制作出兩層復(fù)合背景。

本文權(quán)當(dāng)開開眼界了，為了更快地?fù)肀?CSS3 ，請(qǐng)?jiān)诓皇褂镁W(wǎng)銀和支付寶時(shí)棄用 IE。

原文：http://blog.imbolo.com/cross-browser-css-mutiple-background/

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)