您的位置:首页> 前端教程> CSS3教程
文章导航

CSS RGBA

2018-7-20 00:52| 作者: admin| 查看: 1049| 评论: 0|来自: 蚂蚁部落

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 透明度设置一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部