CSS：跨瀏覽器復合背景

最近發現了一個讓 IE6~8 也能呈現 CSS3 Multiple Backgrounds（復合背景）的方法，當時我小小的震驚了一下?？磥?IE6 曾經的輝煌不單是微軟的捆綁和網銀的支持造成的，在當年，它強大的功能也令其它瀏覽器難以追趕。廢話不說了，先說說 CSS3 里的標準做法。

在 CSS3 標準里，Background 屬性被賦予更加強大的功能，在 CSS2.1 的基礎上，我們可以對一個對象同時使用多個背景圖片。例如如下的樣式：

添加符合背景圖片的時候先從最頂層開始添加，按從高到低的順序寫樣式。大家可以看這個 Demo。可以嘗試用 IE 打開看看效果。

用 IE 打開過 Demo 的同學可以發現 IE 也能顯示復合背景了，如果你查看過 DEMO 的源碼，你可以發現我是通過 IE 濾鏡來實現的。方法是先用標準的 CSS 加一個底層的背景，再通過濾鏡添加上一層的背景。整個 Demo 的樣式如下：

IE 的不足

看到當年 IE 的強大了吧？最早開始支持復合背景的 Safari 3.1 誕生以前，IE6 早就可以通過濾鏡制作出這種效果了。但IE也存在明顯的不足：

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

本文權當開開眼界了，為了更快地擁抱 CSS3 ，請在不使用網銀和支付寶時棄用 IE。

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈