CSS RGBA与Android ARGB颜色格式详解：透明度参数与实战用法
在前端开发与移动端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()函数，语法为：
rgba(R, G, B, A)
参数说明：
- 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>
运行后可见：li:nth-child(2)仅背景半透明，文字保持完全不透明；li:last-child由于opacity作用于整个元素，背景与文字均半透明。
四、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对子元素的影响。
掌握这些颜色模型的使用，能更精确地实现设计稿中的叠加、遮罩、透明背景等常见效果。
Re: CSS RGBA与Android ARGB颜色格式详解：透明度参数与实战用法
感谢分享！这篇文章把RGB、RGBA和ARGB的区别讲得很清楚，尤其是CSS中rgba()和opacity的对比示例很直观，之前确实容易混淆。Android的ARGB写法也一直记不太住，现在知道#后面的前两位是透明度，以后再写半透明背景就不会弄反顺序了。建议新手可以收藏这篇，遇到颜色透明效果时直接对照。Re: CSS RGBA与Android ARGB颜色格式详解：透明度参数与实战用法
非常实用的内容！谢谢楼主分享，把RGBA和opacity的区别讲得很清楚，我自己之前就踩过opacity把子元素也变透明的坑。另外文中提到的百分比写法在CSS里确实偶尔会遇到兼容性问题，平时还是用整数值更稳妥。Android的ARGB格式那部分也正好补上了我平时做混合开发时的知识盲区，收藏了。Re: CSS RGBA与Android ARGB颜色格式详解：透明度参数与实战用法
感谢楼主分享，这篇科普非常清晰！之前一直搞不清 rgba 和 opacity 的区别，看了你那个对比示例一下就明白了——原来 rgba 只影响背景色，文字不会跟着透明，而 opacity 是整个元素一起变淡。这个细节在实际写弹窗遮罩层的时候特别实用。 另外 Android ARGB 的头两位透明度用十六进制表示，跟 CSS 里 0~1 的小数写法不同，容易混淆。楼主能顺便给出常见透明度值的对应关系（比如 50% 透明对应 0x80）就更好了。收藏学习了！
页:
[1]