武林網(wǎng)(www.survivalescaperooms.com)文章簡介:RGBa是一種在CSS中聲明包含透明效果的顏色的方法.
RGBa是一種在CSS中聲明包含透明效果的顏色的方法,它的語法是這樣的:
123div rgba
它允許我們?yōu)樵靥砑油该魃;蛟S我們習(xí)慣了使用”opacity“,它很簡單易用,但是,opacity會使所有的子元素都變成透明的,而且很難去解決這個問題。(除非使用怪異的定位hack) 跨瀏覽器透明同樣頗為棘手。
通過RGBa,我們可以將一個元素設(shè)置為透明,而不會影響其子元素:
并非所有的瀏覽器支持RGBa,所以如果允許的話,可以聲明一個保留色彩。這個色彩應(yīng)該是可靠的——所有的瀏覽器都支持。不聲明就意味著,在不支持RGBa的瀏覽器里面,沒有使用顏色。
1234div rgba</code>
不過,這條退路在某些古董級瀏覽器中依然無效。
RGBa的瀏覽器支持情況瀏覽器,版本,操作系統(tǒng)測試結(jié)果退路
Firefox 3.0.5 (OS X, Windows XP, Vista)支持—
Firefox 2.0.0.18 (PC)不支持純色
Safari 4 (Developer Preview, Mac)支持—
Safari 3.2.1 (PC)支持—
Mobile Safari (iPhone)支持—
Opera 9.6.1不支持純色
IE 5.5 (PC via IETester)不支持無色
IE 6 (PC via IETester)不支持純色
IE 7不支持純色
IE 8 beta 2不支持純色
Google Chrome 1.0.154.43支持—
Google Chrome 1.0.154.46支持—
Netscape 4.8 (PC)不支持沒有顏色
SeaMonkey 1.1.14不支持無色
SeaMonkey 1.1.16不支持純色
SeaMonkey 2.0 beta3支持—
Sunrise 1.7.5支持—
Stainless 0.2.5支持–
Flock 2.0.2支持–
BlackBerry Storm Browser支持純色
Camino 1.6.6不支持純色
上面的數(shù)據(jù)是通過測試demo得到的,該測試頁面包含了更多更完整的瀏覽器兼容性列表。
對IE瀏覽器的更好的退路因為IE瀏覽器支持條件注釋,我們可以拋棄RGB并使用IE的一個私有CSS濾鏡來實現(xiàn)同樣的效果:
123456789
譯自:css-tricks
新聞熱點
疑難解答