CSS RGBA

admin發表於2018-07-20
CSS

RGBA是在RGB的進化版本，通過增加一個引數來控制透明度，在應用的便利性上得到極大提高。

語法結構：

[CSS] 純文字檢視 複製程式碼
RGBA(R,G,B,A)

很明顯，RGBA與RGB相比，新增一個引數A（alpha），它可以控制透明度（0-1之間）。

引數解析:

（1）.R(red)：紅色值。正整數 | 百分數。 

（2）.G(green)：綠色值。正整數 | 百分數。 

（3）.B(blue)：藍色值。正整數 | 百分數。 

（4）.A(Alpha)：Alpha透明度，取值0~1之間，0表示完全透明，1表示完全不透明。

R、G、B三個引數的正整數取值是0-255，百分比取值是0.0% - 100.0%。

超出範圍的數值將被截至其最接近的取值極限，引數A的取值在0-1之間。

需要特別注意的是，並非所有的瀏覽器都支援百分數引數值。

瀏覽器支援:

（1）.IE9+瀏覽器支援此屬性值。

（2）.edge瀏覽器支援此屬性值。

（2）.火狐瀏覽器支援此屬性值。

（3）.谷歌瀏覽器支援此屬性值。

（4）.opera瀏覽器支援此屬性值。

（5）.safria瀏覽器支援此屬性值。

例項程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>CSS教程</title>  
<style type="text/css">  
.first{color:rgba(128,128,128,0.2);}  
.second{color:rgba(50%,50%,50%,0.3);}  
.third{color:rgba(160,100,150,0.6);}  
</style>  
</head>  
<body>  
<div class="first">螞蟻部落</div>  
<div class="second">螞蟻部落</div>  
<div class="third">螞蟻部落</div>  
</body>  
</html>

上面的程式碼在設定文字顏色的同時，也設定了透明度。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:300px;
  height:200px;
  background-color:rgba(255,0,0,0.3);
  text-align:center;
  font-size:12px;
}
</style>
</head>
<body>
<div id="box">螞蟻部落</div>
</body>
</html>

使用RGBA設定元素背景透明度不會影響其中內容的透明度，這一點與opacity不同。

具體可以參閱CSS 透明度設定一章節。

相關文章