RGBa色彩的瀏覽器支持

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

它允許我們?yōu)樵靥砑油该魃；蛟S我們習(xí)慣了使用”opacity“，它很簡(jiǎn)單易用，但是，opacity會(huì)使所有的子元素都變成透明的，而且很難去解決這個(gè)問題。（除非使用怪異的定位hack） 跨瀏覽器透明同樣頗為棘手。

通過RGBa，我們可以將一個(gè)元素設(shè)置為透明，而不會(huì)影響其子元素：

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

不過，這條退路在某些古董級(jí)瀏覽器中依然無(wú)效。

RGBa的瀏覽器支持情況 瀏覽器，版本，操作系統(tǒng) 測(cè)試結(jié)果 退路 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 - 不支持 無(wú)色 IE 6-8 不支持 純色 IE 9 支持 —? Google Chrome 所有版本 支持 —? Netscape 所有版本 不支持 沒有顏色 SeaMonkey 1.1.x 不支持 無(wú)色 SeaMonkey 2.0 + 支持 —? BlackBerry Storm Browser 支持 –

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

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

經(jīng)過測(cè)試發(fā)現(xiàn)，RGBa顏色可以用于border，不過，不同的瀏覽器對(duì)于border的RGBa支持不太一樣，不過唯一的不同是，F(xiàn)F在border的拐角處會(huì)出現(xiàn)疊加，比如透明度是0.4，那么在FF中，四個(gè)角的透明度會(huì)變成0.8，而支持RGBa的非FF瀏覽器不會(huì)出現(xiàn)這種情況。

當(dāng)前題目：RGBa色彩的瀏覽器支持
地址分享：http://www.muchs.cn/news24/319124.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、面包屑導(dǎo)航、網(wǎng)站營(yíng)銷、關(guān)鍵詞優(yōu)化、外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)