RGB對于大家來說一點不陌生，他就是紅色R+綠色G+藍(lán)色B，那現(xiàn)在我們所說的RGBA又是什么呢？說得簡單一點就是在RGB的基礎(chǔ)上加進(jìn)了一個通道Alpha。從而形成了我們今天需要討論的RGBA。如果需要更詳細(xì)的解說，大家就跟著我一起往下看吧。

語法:

R：紅色值。正整數(shù) | 百分?jǐn)?shù)

G：綠色值。正整數(shù) | 百分?jǐn)?shù)

B：藍(lán)色值。正整數(shù)| 百分?jǐn)?shù)

A：透明度。取值0~1之間

取值：

<length> ：Hue(色調(diào))。 0(或360)表示紅色，120表示綠色，240表示藍(lán)色，當(dāng)然可取其他數(shù)值來確定其它顏色；

<percentage> ：Saturation(飽和度)。 取值為0%到100%之間的值；

<percentage> ：Lightness(亮度)。 取值為0%到100%之間的值；

<opacity> ：alpha(透明度)。 取值在0到1之間；

說明：

RGB色彩模式（也翻譯為“紅綠藍(lán)”，比較少用）是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過對紅(R)、綠(G)、藍(lán)(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍(lán)三個通道的顏色，這個標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統(tǒng)之一。

RGBA在RGB的基礎(chǔ)上多了控制alpha透明度的參數(shù)。以上R、G、B三個參數(shù)，正整數(shù)值的取值范圍為：0 - 255。百分?jǐn)?shù)值的取值范圍為：0.0% - 100.0%。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分?jǐn)?shù)值。A參數(shù)，取值在0~1之間，不可為負(fù)值。

瀏覽器的兼容性：

 

如果龐統(tǒng)說rgba是制作透明色（透明背景色、透明邊框色、透明前景色等），大家不由會想起opacity 這個東西。他在我們CSS2中制作背景色通常用到，可是要用他來制作邊框色或都說前景色的話，那他就只能在邊上站著了，有心無力呀。

現(xiàn)在我們先來看一個rgba和opacity的對比實例

HTML代碼：

 

我們分別給這兩上ul中的li應(yīng)用相關(guān)樣式， 在li.opacity中我用使用CSS2中的opacity而在li.rgba中我們使用CSS3的rgba新屬性

Opacity樣式

 

RGBA樣式

我們來看看其效果：

 

效果中我們可以看出，他們相同之處就是背景色完全是一樣的，但區(qū)別就是一直讓大家覺得頭痛的問題，那就是opacity后代元素會隨著一起具有透明性，所以我們Opacity中的字隨著透明值下降越來越看不清楚，而RGBA不具有這樣的問題，但是其支持的瀏覽器中有一個占在大市場份額的IE不支持，這也就是讓我們需要去做兼容，（聽到兼容二字大家是不是特?zé)?，我也是的）希望IE早點能實現(xiàn)。

在CSS2中Opacity能實現(xiàn)透明，而且大多主流瀏覽器都支持，雖然IE下有點麻煩

那為什么不使用opacity而要使用rgba呢

從我們上面的實例中我們也知道，RGBA比元素設(shè)置CSS的透明度更好，因為單獨的顏色可以在不影響整個元素的透明度，他不會影響到元素其他的屬性，比如說邊框，字體同時也不會影響到其他元素的相關(guān)透明度。

在RGBA還沒有出世前，我們都是使用opacity來做透明，但這里存在一個問題，就是我們在父元素中使用了opacity，那么其垢代元素都會受其影響，我想這個問題大家都有碰到過，為了解決這樣的問題我們需要增加一個空的div來專門放置使用透明的背景，然后通過使用絕對定位來實現(xiàn)我們需要的結(jié)果。為了更好的理解我們在這里來看一個使用opacity的實例。首先來看html

 

先給他們附上相應(yīng)的樣式

 

效果：

 

從效果中我們明顯的看出，這里和我們前面那個例子一樣，名叫bg的div中設(shè)置了opacity，造成其后代元素段落P的前景色也隨著變了。如果需要解決這樣的問題，在不使用別的新技術(shù)下，也就是說堅持使用opacity.那么我們就需要添加一個空的層，在這個地方應(yīng)用透明背景層首先來看看改變一下html 結(jié)構(gòu)吧

 

現(xiàn)在我們需要提把bg-content和bg層重合起來，換句話說就是把透明背景層單獨放在另外一個div，然后把內(nèi)容層和背景層重疊。換而言之，我們需要在bg這個div上設(shè)置透明色，而在bg-content這個div上放置內(nèi)容，并且都使用定位，保證bg這個div在bg-content這個div下面。具體看看其CSS的變化：

 

首先我們在html中把bg這個div分離出來了，讓他和bg-content這個div變成兄弟關(guān)系，然后通過CSS把他們都定位在同一位置，只是bg放在了bg-content的下面（z-index）控制，另外在bg的div上應(yīng)用了透明?？纯催@樣一來我們有什么變化，效果如下：

 

跟沒有處理之前相比是不是完美多了?？墒沁@樣弄就是有一點麻煩，現(xiàn)在CSS3的RGBA完全可以幫大家解決這樣的問題了，接著我們在看一個用RGBA制作的效果吧，看看他是不是完全一樣的。

HTML代碼：

 

我們只要在bg-content中應(yīng)用一個background:rgba();就能有上面那種效果了，具體看看代碼吧：

 

效果：

 

從效果的對比中我們可以明顯的看出，和opacity做出的效果是完全一樣的。但是這里有一個問題是我們討厭的IE（除IE9以外）都不支持CSS3的RGBA屬性。那么這樣我們在IE下不是什么都沒有嗎？回答是肯定的，雖然IE不支持但我們不能什么都不給他呀，這樣一來我們就碰到一個新名詞"fallback color",它的意思是我給IE備份一個色，在不支持RGBA的情況下，我照樣給他一個色，而對rgba支持的瀏覽器并不會帶來影響，那我們一起看看這個fallback color怎么用吧。其實很簡單，我們可以給其制作一張圖片或都只給其加一個色，我們這些就只加一個色吧拿前面的實例來說吧，我們只要把bg-content的樣式換一下

 

這里需要注意的是startColorStr和endColorStr的值#80000000,其中前兩位是十六進(jìn)制的透明度80,也就是透明值為0.5而后面六位是十六進(jìn)制的顏色#000000(black黑色)。如果你和我一樣不知道怎么轉(zhuǎn)換這個值，你可以采用下面這個工具：

CSS背景顏色屬性值轉(zhuǎn)換 有關(guān)于這個工具的使用大家可以點擊志哥的《使用IE過渡濾鏡和CSS3中的RGBA屬性完成背景色透明效果》

綜合上面的所述，我們規(guī)納一個RGBA在實際應(yīng)用中的模式

 

上面代碼中的顏色值可以根據(jù)自己的需求修改，此處只是一個代表性的值。

我們前面簡單的帶過一句，我們rgba不單可以應(yīng)用在background上，我們還可以應(yīng)用在只要設(shè)置了顏色的地方都可以使用，我在這里簡單的說一下幾種：

第一種：前景色color

HTML

 

CSS樣式：

 

效果：

 

第二種邊框色border-color

HTML

CSS樣式：

 

效果：

 

第三種：字體的陰影色text-shadow

HTML:

 

CSS:

效果：

 

第四種改變邊框陰影色

HTML:

 

CSS:

效果:

 

最后一種就是漸變顏色,關(guān)于這個我就不在多說了，因為我們前面的CSS Gradient有說過個例子，感興趣的朋友可以到這里去看看。

這里需要告訴大家的一點，這幾種使用rgba的方法，目前只有在支持RGBA屬性的瀏覽器才能正常顯示，如果需要使用的朋友，請考慮這方面的顯示差別。那么到這里關(guān)于CSS3的RGBA我就介紹完了，希望能給大家的學(xué)習(xí)帶來一定的幫助，更希望志同道合的朋友一起探討一起學(xué)習(xí)一起進(jìn)步。

最新評論