这篇文章给大家分享的是有关css中rgba的值有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
在css中,rgba有四个值,分别是红(R)、绿(G)、蓝(B)、透明度(A)四个颜色。可以通过通道的变化以及它们相互之间的叠加来获得到各式各样的颜色。RGBA颜色标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
rgba是什么意思?
RGBA:一种色彩模式 ,是工业界一种颜色标准;可以通过对红(R)、绿(G)、蓝(B)、透明度(A)四个颜色通道的变化以及它们相互之间的叠加来获得到各式各样的颜色的。RGBA颜色标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
在css中我们可以采用RGBA标准来设置颜色值,这就需要用到css rgba()函数,我们来了解一下rgba的相关知识吧。
CSS rgba() 函数
rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)四个颜色的叠加来生成各式各样的颜色。
语法
rgba(red, green, blue, alpha)
rgba() 函数有四个值,分别为:
red 定义红色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
green 定义绿色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
blue 定义蓝色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
透明度(A)取值 0~1 之间, 代表透明度。
示例:使用rgba() 函数设置颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { background: rgba(192, 192, 192); } #p1 { background-color: rgba(255, 255, 255); } #p2 { background-color: rgba(0, 255, 0); } #p3 { background-color: rgba(0, 0, 255); } #p4 { background-color: rgba(0, 0, 0,0.5); } #p5 { background-color: rgba(255, 255, 0); } </style> </head> <body> <p>RGBA 颜色:</p> <p id="p1">白色</p> <p id="p2">绿色</p> <p id="p3">蓝色</p> <p id="p4">黑色</p> <p id="p5">黄色</p> </body> </html>
效果:
css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等
感谢各位的阅读!关于“css中rgba的值有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。