關於RGBA顏色值

RGBA

RGBA的意思是（Red-Green-Blue-Alpha）它是在RGB上擴展包括了「alpha」通道，運行對顏色值設置透明度。

div {

background:rgba(255,0,0,0.5);

}

在RGBA中，四個數字以逗號分隔開，前面三個數字標識這個顏色的RGB值，這個設置和RGB並無任何區別，RGBA也能夠設置爲百分比，後面的數字表明透明度，範圍在0-1之間。1表示不透明，在這裏就至關於rgb(255,0,0),0表示全透明。

一般咱們爲了省略一個0:

div {

background:rgba(255,0,0,.5);

}

RGBA是CSS3引入的一個顏色的值。在CSS3中，咱們能夠用如下六種格式表示顏色，：

background:#f00;

background:red;

background:rgb(255,0,0);或者 rgb(100%,0%,0%);

background:rgba(255,0,0,1);

background:hsl(0,100%,50%);

background:hsla(0,100%,50%,1);

 

以上標識的都是紅色。

Can I use RGBA？

最新版的瀏覽器都是支持RGBA的，IE8如下是不支持的，對於顏色有透明度的，可使用RGBA，選擇對IE8優雅降級，使用RGB不支持透明度等。可是也有一些方法可以使RGBA在IE跨瀏覽器支持:

使用支持透明度通道的圖片PNG。

還有一種辦法就是使用IE filter:

好比我想要一個50%透明度紅色的背景：

 

background:transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);

zoom: 1;

這個就是利用IE filter填充了背景,咱們使用透明度設置的是7F,也就是FF的一半表明透明。若是要設置10%透明度，就要把startColorstr=#19FF0000,endColorstr=#19FF0000.後面的六位表明顏色，前面的表明的是明度，並且是16進制的,按照透明度百分比計算出FF的的百分比。由於這裏咱們用的是ARGB，具體這裏的計算我也沒太懂。

對比：10%透明度

 

在要求完美兼容的時候，咱們可使用IE filter 或者png圖片。可是通常不影響使用狀況下，對IE8一下瀏覽採起降級，也是最明智的措施，得到最新版的瀏覽器，可讓用戶在過程當中，這也是爲將來着想。由於這種手段來迫使用戶得到更好的用戶體驗,並且咱們發現IE filter渲染的顏色並不標準。

 

總結：

RGBA在CSS3種是一個很是重要的顏色值，由於它支持alpha通道。加強了CSS對色彩的處理，咱們回顧了RGBA的格式，RGBA前面的三個數字的格式和RGB並無差異，最好一個數字的範圍是0-1，表明透明度。有時咱們省略0，只寫小數點和後面的數字。CSS中新增了一些顏色的表達方式，好比HSL等。爲了讓RGBA作到跨瀏覽器支持咱們要採起IE filter 或者PNG圖片 filter渲染並非標準的，顏色值也是有誤差。咱們在計算透明度的時候，在IE Filter中 要採用16進制的計算方式，50%的透明度是7F，也就是255的一半，127.在當前狀況下，推薦使用RGBA，在不影響功能的前提下，能夠對IE8如下瀏覽器不使用完美兼容的方案，對於影響功能時，可使用 IE filter 和png.

最後咱們提供一個計算IE filter 的網站，能夠轉換RGBA 和  IE filter。http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/ 。我在轉換IE filter是，都是先用255乘以透明度，而後在四捨五入，而後轉換成16進制的。