本帖最后由 gz_xudada 于 2018-8-24 22:27 编辑
CSS3 RGBA颜色值RGBA是在RGB的升级版，通过增加一个参数来控制透明度，在应用上给我提供了更大的便利. 语法结构 RGBA与RGB相比，新增一个参数A（alpha），它可以控制透明度(0~1之间). 参数解折- R(red):红色值取值:正整数|百分数.
- G(green):绿色值取值:正整数|百分数.
- B(blue):蓝色值取值:正整数|百分数.
- A(Alpha):Alpha透明度，取值0 ~ 1之间，0表示完全透明，1表示完全不透明.
注意: R、G、B三个参数的正整数取值是0 ~ 255，百分比取值是0% ~ 100%. 超出范围的数值将被截至其最接近的取值极限，参数A的取值在0~1之间. 需要特别注意的是，并非所有的浏览器都支持百分数参数值. 浏览器支持
1.IE9+浏器支持属性值. 2.edge浏览器支持此属性值. 3.火狐浏览器支持此属性值. 4.谷歌浏览器支持此属性值. 5.opera浏览器支持此属性值. 6.safria浏览器支持此属性值. 实例代码
案例1:设置字体颜色 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rgba设置字体颜色</title>
<style type="text/css">
/*
color属性是css中设置字体颜色
font-size属性设置字体大小
*/
.first{
color:rgba(255,128,0,0.2);
font-size:50px;
}
.second{
color:rgba(90%,70%,50%,0.8);
font-size:50px;
}
.third{
color:rgba(160,255,150,.6);/*0.6也可以写成.6*/
font-size:50px;
}
</style>
</head>
<body>
<div class="first">传智播客</div>
<div class="second">传智播客</div>
<div class="third">传智播客</div>
</body>
</html> 效果:
案例2:设置背景颜色 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rgba设置字体颜色</title>
<style type="text/css">
/*
color属性是css中设置字体颜色
font-size属性设置字体大小
*/
.first{
color:rgba(255,128,0,0.2);
font-size:50px;
}
.second{
color:rgba(90%,70%,50%,0.8);
font-size:50px;
}
.third{
color:rgba(160,255,150,.6);/*0.6也可以写成.6*/
font-size:50px;
}
</style>
</head>
<body>
<div class="first">传智播客</div>
<div class="second">传智播客</div>
<div class="third">传智播客</div>
</body>
</html> 效果图: 注意:使用RGBA设置元素背景透明度不会影响内容的透明度,与opacity属性设置不同!
| 
收藏
淘帖
踩
