RGB是一种色彩标准,由红(Red)、绿(Green)、蓝(Blue)3种颜色变化来得到各种颜色。而RGBA,说白了就是在RGB基础上增加了一个透明度通道Alpha。

语法:

rgba(R, G, B, A)

说明:

R,指的是红色值(Red);G,指的是绿色值(Green);B,指的是蓝色值(Blue);A,指的是透明度(Alpha)。

R、G、B这三个可以为整数,取值范围为0~255,也可以为百分比,取值范围为0%~100%。参数A为透明度,跟opacity属性是一样的,取值范围为0.0~1.0。

下面几种有关RGBA颜色的写法都是正确的:

rgba(255, 255, 0, 0.5) rgba(50%, 80%, 50%, 0.5)

举例:background-color属性取值为RGBA

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></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,透明度为1.0*/ li:first-child { background-color:rgba(255,0,255,1.0); } /*第2个li,透明度为0.6*/ li:nth-child(2) { background-color:rgba(255,0,255,0.6); } /*第3个li,透明度为0.3*/ li:last-child { background-color:rgba(255,0,255,0.3); } </style> </head> <body> <ul> <li>绿叶学习网</li> <li>绿叶学习网</li> <li>绿叶学习网</li> </ul> </body> </html>

浏览器预览效果如下图所示。

分析:

在这个例子中,我们定义背景颜色background-color为RGBA颜色,因此RGBA颜色中的透明度也只是针对元素的背景颜色,而不会改变元素内部文本的透明度。那么如果定义字体颜色color为RGBA颜色,那又会怎样呢?请看下面例子。

举例:color属性取值为RGBA

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></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; background-color:lightskyblue; } /*第1个li,透明度为1.0*/ li:first-child { color:rgba(255, 0, 0, 1.0); } /*第2个li,透明度为0.6*/ li:nth-child(2) { color:rgba(255, 0, 0, 0.6); } /*第3个li,透明度为0.3*/ li:last-child { color:rgba(255, 0, 0, 0.3); } </style> </head> <body> <ul> <li>绿叶学习网</li> <li>绿叶学习网</li> <li>绿叶学习网</li> </ul> </body> </html>

浏览器预览效果如下图所示。

分析:

在这个例子中,我们定义字体颜色color为RGBA颜色,因此RGBA颜色中的透明度也只是针对内部文本的颜色,而不会改变元素背景颜色的透明度。

从上面两个例子我们可以知道,RGBA中的透明度只会针对当前设置的属性起作用。

举例:RGBA颜色和opacity属性比较

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></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使用rgba*/ li:first-child { background-color:rgba(255, 0, 255, 0.6); } /*第2个li使用opacity*/ li:nth-child(2) { background-color:rgb(255, 0, 255); opacity:0.3; } </style> </head> <body> <ul> <li>绿叶学习网</li> <li>绿叶学习网</li> </ul> </body> </html>

浏览器预览效果如下图所示。

分析:

从上面例子可以清楚看出来,如果对某个元素使用opacity属性,则该元素中的所有的子元素以及文本内容都会受到影响。

很多初学的小伙伴在尝试改变某个元素透明度时,大多数都是用opacity属性来处理。然后查看浏览器效果时,却发现文字的透明度也被改变了(本来是不想改变文字透明度的)!然后在那里苦恼半天都没找到解决方法。基本每一个从事前端开发的小伙伴都被这个问题困扰过。实际上,我们使用RGBA颜色来代替opacity属性,就可以轻松实现了。