在css中,rgba有四個值,分別是紅(R)、綠(G)、藍(lán)(B)、透明度(A)四個顏色。可以通過通道的變化以及它們相互之間的疊加來獲得到各式各樣的顏色。RGBA顏色標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色,是目前運用最廣的顏色系統(tǒng)之一。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
rgba是什么意思?
RGBA:一種色彩模式 ,是工業(yè)界一種顏色標(biāo)準(zhǔn);可以通過對紅(R)、綠(G)、藍(lán)(B)、透明度(A)四個顏色通道的變化以及它們相互之間的疊加來獲得到各式各樣的顏色的。RGBA顏色標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色,是目前運用最廣的顏色系統(tǒng)之一。
在css中我們可以采用RGBA標(biāo)準(zhǔn)來設(shè)置顏色值,這就需要用到css rgba()函數(shù),我們來了解一下rgba的相關(guān)知識吧。
CSS rgba() 函數(shù)
rgba() 函數(shù)使用紅(R)、綠(G)、藍(lán)(B)、透明度(A)四個顏色的疊加來生成各式各樣的顏色。
語法
rgba(red, green, blue, alpha)
rgba() 函數(shù)有四個值,分別為:
-
red 定義紅色值,取值范圍為 0 ~ 255,也可以使用百分比 0% ~ 100%。
-
green 定義綠色值,取值范圍為 0 ~ 255,也可以使用百分比 0% ~ 100%。
-
blue 定義藍(lán)色值,取值范圍為 0 ~ 255,也可以使用百分比 0% ~ 100%。
-
透明度(A)取值 0~1 之間, 代表透明度。
示例:使用rgba() 函數(shù)設(shè)置顏色
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { background: rgba(192, 192, 192); } #p1 { background-color: rgba(255, 255, 255); } #p2 { background-color: rgba(0, 255, 0); } #p3 { background-color: rgba(0, 0, 255); } #p4 { background-color: rgba(0, 0, 0,0.5); } #p5 { background-color: rgba(255, 255, 0); } </style> </head> <body> <p>RGBA 顏色:</p> <p id="p1">白色</p> <p id="p2">綠色</p> <p id="p3">藍(lán)色</p> <p id="p4">黑色</p> <p id="p5">黃色</p> </body> </html>
效果:
推薦學(xué)習(xí):css視頻教程