CSS RGBA方法简介说明


摘要:
下文讲述CSS中RGBA方法的简介说明,如下所示:

RGBA 功能说明:
RGBA是RGB的进化版本,RGBA的功能是在RGB中增加一个参数用于控制颜色的透明度,便可以更好的控制透明度。
RGBA 语法:
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%
RGB当输入值超过极限值,则会取最接近的值,
 A 取值为0~1

RGBA注意事项:
1.并不是所有浏览器支持百分比
2.RGBA支持的浏览器
2.1.IE9+浏览器支持此属性值
2.2.edge浏览器支持此属性值
2.3.火狐浏览器支持此属性值
2.4.谷歌浏览器支持此属性值
2.5.opera浏览器支持此属性值
2.6.safria浏览器支持此属性值

例:
RGBA设置元素颜色及颜色透明度

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.maomao365.com/" /> 
<title>猫猫教程(www.maomao365.com)---RGBA设置背景色透明度</title>  
<style type="text/css">  
.one{color:rgba(200,200,200,0.1);}  
.two{color:rgba(30%,30%,30%,0.4);}  
.three{color:rgba(90,90,90,0.5);}  
</style>  
</head>  
<body>  
<div class="one">猫猫教程---1</div>  
<div class="two">猫猫教程---2</div>  
<div class="three">猫猫教程---3</div>  
</body>  
</html>
css RGBA属性的用法举例讲解

css RGBA属性的用法举例讲解