RGB是一種色彩標准,是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的顏色。RGBA說白了,就是在RGB的基礎上加了一個透明度通道Alpha。
語法:
rgba(R,G,B,A)
說明:
R:紅色值(Red);
G:綠色值(Green);
B:藍色值(Blue);
A:透明度(Alpha);
R、G、B三個參數可以為正整數,也可以為百分比。正整數值的取值范圍為0~255,百分數值的取值范圍為0.0%~100.0%。超出范圍的數值將被截至其最接近的取值極限。並非所有浏覽器都支持使用百分數值。
參數A為透明度,類似opacity屬性,取值范圍在0.0~1.0之間,不可為負值。下面是RGBA顏色的正確用法:
rgba(255,255,0,0.5) rgba(50%,80%,50%,0.5)
大家看到RGBA顏色,很容易讓我們想起上一節中的不透明度opacity屬性。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 RGBA顏色</title> <style type="text/css"> *{padding:0;margin:0;} ul { display:inline-block; list-style-type:none; width:200px; } li { height:30px; line-height:30px; font-size:20px; font-weight:bold; text-align:center; } /*第1個li*/ li:first-child { background-color:#FF00FF; } /*第2個li*/ li:nth-child(2) { background-color:rgba(255,0,255,0.5); } /*第3個li*/ li:last-child { background-color:#FF00FF; opacity:0.5; } </style> </head> <body> <ul> <li> 學習網</li> <li> 學習網</li> <li> 學習網</li> </ul> </body> </html>
在浏覽器預覽效果如下:
分析:
十六進制顏色值#FF00FF等價於rgb(255,0,255)。第1個li元素沒有使用RGBA顏色值,也沒有使用透明度opacity屬性;第2個li元素使用RGBA顏色值;第3個li元素使用透明度opacity屬性。
大家可以清晰地看出,假如我們對某個元素使用透明度opacity屬性,則該元素的內容以及子元素都會受到影響。
從上面的例子我們知道,對於設置元素的透明度,RGBA比透明度opacity屬性更好,因為RGBA不會影響元素中的內容以及子元素的不透明度。
疑問1、十六進制顏色值與RGB顏色值如何轉換呢?
建議大家下載Color Express這個軟件,簡單好用。不僅可以取顏色,還可以轉換顏色值等。