CSS中怎么利用RGBa設(shè)置元素為透明效果，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到臺(tái)江網(wǎng)站設(shè)計(jì)與臺(tái)江網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋臺(tái)江地區(qū)。

RGBa是一種在CSS中聲明包含透明效果的顏色的方法，它的語法是這樣的：

代碼如下:

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)該是可靠的——所有的瀏覽器都支持。不聲明就意味著，在不支持RGBa的瀏覽器里面，沒有使用顏色。

代碼如下:

div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}

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

RGBa的瀏覽器支持情況

 

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

因?yàn)镮E瀏覽器支持條件注釋，我們可以拋棄RGB并使用IE的一個(gè)私有CSS濾鏡來實(shí)現(xiàn)同樣的效果：

代碼如下:

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。