rgba中a是指什么 ?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
RGBA颜色
RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA说白了,就是在RGB的基础上加了一个透明度通道Alpha。
语法:
rgba(R,G,B,A)
说明:
R:红色值(Red);
G:绿色值(Green);
B:蓝色值(Blue);
A:透明度(Alpha);
R、G、B三个参数可以为正整数,也可以为百分比。正整数值的取值范围为0~255,百分数值的取值范围为0.0%~100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
参数A为透明度,类似opacity属性,取值范围在0.0~1.0之间,不可为负值。下面是RGBA颜色的正确用法:
rgba(255,255,0,0.5) rgba(50%,80%,50%,0.5)
举例:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 RGBA颜色</title> <style type="text/css"> *{padding:0;margin:0;} ul { display:inline-block; list-style-type:none; width:200px; } li { height:30px; line-height:30px; font-size:20px; font-weight:bold; text-align:center; } /*第1个li*/ li:first-child { background-color:#FF00FF; } /*第2个li*/ li:nth-child(2) { background-color:rgba(255,0,255,0.5); } /*第3个li*/ li:last-child { background-color:#FF00FF; opacity:0.5; } </style> </head> <body> <ul> <li>亿速云</li> <li>亿速云</li> <li>亿速云</li> </ul> </body> </html>
分析:
十六进制颜色值#FF00FF等价于rgb(255,0,255)。第1个li元素没有使用RGBA颜色值,也没有使用透明度opacity属性;第2个li元素使用RGBA颜色值;第3个li元素使用透明度opacity属性。
大家可以清晰地看出,假如我们对某个元素使用透明度opacity属性,则该元素的内容以及子元素都会受到影响。
从上面的例子我们知道,对于设置元素的透明度,RGBA比透明度opacity属性更好,因为RGBA不会影响元素中的内容以及子元素的不透明度。
感谢各位的阅读!看完上述内容,你们对rgba中a是指什么 大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。