在前端开发与移动端UI设计中，颜色值的正确使用直接影响界面效果。不少开发者对RGB、RGBA、ARGB三种颜色模型的概念和具体写法存在混淆。本文从Web与Android实际编码场景出发，解析它们的区别，并重点演示CSS中rgba()函数的调用方式及与opacity属性的差异。
一、颜色模型概述
RGB色彩模式通过红（R）、绿（G）、蓝（B）三个通道的变化叠加产生丰富颜色，每个通道取值范围0～255或0%～100%。ARGB在RGB基础上添加了Alpha（透明度）通道，常见于32位位图存储，如Android中8位颜色值#1e000000的头两位1e即透明度，00完全透明，ff完全不透明。RGBA也是RGB附加Alpha，但写法中透明度放在最后，如rgba(255,0,255,0.5)，PNG图像格式即使用RGBA。
二、CSS中的RGBA颜色用法
CSS3支持rgba()函数，语法为：参数说明：
- R、G、B：红色、绿色、蓝色值，可取正整数（0～255）或百分比（0.0%～100.0%），超出范围会被截取到最近极限。部分旧版浏览器不支持百分比写法。
- A：透明度，取值0.0～1.0，不可为负。
正确示例：- background-color: rgba(255, 255, 0, 0.5); /* 黄色半透明 */
- background-color: rgba(50%, 80%, 50%, 0.5); /* 百分比写法 */
三、rgba与opacity属性的核心差异
opacity设置整个元素（包括子元素和文本）的不透明度，而rgba仅针对指定属性的颜色本身。下面是一个对比示例，展示背景颜色使用纯色、rgba半透明、opacity半透明三种效果：- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>RGBA与opacity对比</title>
- <style>
- *{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;}
- li:first-child{background-color:#FF00FF;}
- li:nth-child(2){background-color:rgba(255,0,255,0.5);}
- li:last-child{background-color:#FF00FF;opacity:0.5;}
- </style>
- </head>
- <body>
- <ul>
- <li>文字一（纯色背景）</li>
- <li>文字二（rgba背景）</li>
- <li>文字三（opacity背景+文字透明）</li>
- </ul>
- </body>
- </html>
四、Android颜色定义中的ARGB
Android中颜色值用十六进制表示，6位（如#000000）为RGB，8位（如#1e000000）为ARGB。头两位是透明度（00~ff），后六位是RGB值。常用透明度参考：
- 00：完全透明
- 80：半透明（约50%）
- ff：完全不透明
在代码中设置：- view.setBackgroundColor(Color.parseColor("#80FF0000")); // 红色半透明
五、总结
- RGB：三个通道，无透明度。
- RGBA：CSS3函数，透明度在最后，仅影响该颜色属性。
- ARGB：Android颜色格式，透明度在最前，常用于资源文件或代码直接赋值。
- 开发中根据场景选择：Web使用rgba()控制局部透明度；移动端使用ARGB十六进制值。注意区分rgba与opacity对子元素的影响。
掌握这些颜色模型的使用，能更精确地实现设计稿中的叠加、遮罩、透明背景等常见效果。 |
发表于 
发表于