什么是RGBa？它是一種在CSS中聲明包含透明效果的顏色的方法，它的語法是這樣的： ?div { ?? background: rgba(200, 54, 54, 0.5); }

它允許我們為元素添加透明色。或許我們習慣了使用”opacity“，它很簡單易用，但是，opacity會使所有的子元素都變成透明的，而且很難去解決這個問題。（除非使用怪異的定位hack） 跨瀏覽器透明同樣頗為棘手。

通過RGBa，我們可以將一個元素設置為透明，而不會影響其子元素：

聲明一個保留顏色 并非所有的瀏覽器支持RGBa，所以如果允許的話，可以聲明一個保留色彩。這個色彩應該是可靠的&mdash;—所有的瀏覽器都支持。不聲明就意味著，在不支持RGBa的瀏覽器里面，沒有使用顏色。 ?div { ?? background: rgb(200, 54, 54); /* The Fallback */ ?? background: rgba(200, 54, 54, 0.5); }</code>

不過，這條退路在某些古董級瀏覽器中依然無效。

RGBa的瀏覽器支持情況 瀏覽器，版本，操作系統 測試結果 退路 Firefox 3.0+ 支持 —? Firefox 2.0- 不支持 純色 webkit -safari 3.x+ 支持 —? webkit -safari 2.0- 不支持 – Mobile Safari (iPhone/iPod Touch /iPad) 支持 —? opera 10.x+ 支持 —? Opera 9.x- 不支持 純色 IE 5.5 - 不支持 無色 IE 6-8 不支持 純色 IE 9 支持 —? Google Chrome 所有版本 支持 —? Netscape 所有版本 不支持 沒有顏色 SeaMonkey 1.1.x 不支持 無色 SeaMonkey 2.0 + 支持 —? BlackBerry Storm Browser 支持 –

上面的數據是通過測試demo得到的，該測試頁面包含了更多更完整的瀏覽器兼容性列表。

對IE瀏覽器的更好的退路 因為IE瀏覽器支持條件注釋，我們可以拋棄RGB并使用IE的一個私有CSS濾鏡來實現同樣的效果： ?<!--[if IE]> ?? <style type="text/css"> ?? .color-block { ?????? background:transparent; ?????? filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); ?????? zoom: 1; ??? } ??? </style> <![endif]-->

經過測試發現，RGBa顏色可以用于border，不過，不同的瀏覽器對于border的RGBa支持不太一樣，不過唯一的不同是，FF在border的拐角處會出現疊加，比如透明度是0.4，那么在FF中，四個角的透明度會變成0.8，而支持RGBa的非FF瀏覽器不會出現這種情況。

當前題目：RGBa色彩的瀏覽器支持
地址分享：http://www.2m8n56k.cn/news24/319124.html

成都網站建設公司_創新互聯，為您提供服務器托管、面包屑導航、網站營銷、關鍵詞優化、外貿建站、移動網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯