RGB對(duì)于大家來說一點(diǎn)不陌生，他就是紅色R+綠色G+藍(lán)色B，那現(xiàn)在我們所說的RGBA又是什么呢？說得簡單一點(diǎn)就是在RGB的基礎(chǔ)上加進(jìn)了一個(gè)通道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)，是通過對(duì)紅(R)、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍(lán)三個(gè)通道的顏色，這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是目前運(yùn)用最廣的顏色系統(tǒng)之一。

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

瀏覽器的兼容性：

 

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

現(xiàn)在我們先來看一個(gè)rgba和opacity的對(duì)比實(shí)例

HTML代碼：

 

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

Opacity樣式

 

RGBA樣式

我們來看看其效果：

 

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

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

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

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

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

 

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

 

效果：

 

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

 

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

 

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

 

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

HTML代碼：

 

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

 

效果：

 

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

 

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

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

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

 

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

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

第一種：前景色color

HTML

 

CSS樣式：

 

效果：

 

第二種邊框色border-color

HTML

CSS樣式：

 

效果：

 

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

HTML:

 

CSS:

效果：

 

第四種改變邊框陰影色

HTML:

 

CSS:

效果:

 

最后一種就是漸變顏色,關(guān)于這個(gè)我就不在多說了，因?yàn)槲覀兦懊娴腃SS Gradient有說過個(gè)例子，感興趣的朋友可以到這里去看看。

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

最新評(píng)論