rgb()用于定义不透明的三原色颜色，而rgba()在rgb基础上增加alpha通道控制透明度，适用于需要半透明效果的设计场景。
rgb() 和 rgba() 都是 CSS 中用于定义颜色的函数，它们在视觉表现和实际应用中有明显区别。理解这些差异能帮助开发者更灵活地控制网页色彩与透明度。
rgb() 的基本用法
rgb() 表示红（Red）、绿（Green）、蓝（Blue）三原色的组合，通过调整每个通道的数值（0–255）或百分比来生成颜色。
例如：-
rgb(255, 0, 0)表示纯红色 -
rgb(0%, 100%, 0%)表示纯绿色
这种写法不支持透明度，所有使用 rgb() 的颜色都是完全不透明的。
rgba() 增加透明通道
rgba() 在 rgb() 基础上多了一个参数：alpha 通道，用于控制颜色的透明度，取值范围是 0（完全透明）到 1（完全不透明）。
立即学习“前端免费学习笔记（深入）”；
例如：-
rgba(255, 0, 0, 0.5)是半透明红色 -
rgba(0, 0, 0, 0.8)是深灰色，略微透明
这个额外的 alpha 值让 rgba() 特别适合做背景叠加、蒙版、阴影等需要层次感的设计。
使用场景对比
在选择使用哪个函数时，关键看是否需要透明效果。
- 纯色文本、边框、不需要透明背景时，用 rgb() 更简洁
- 制作半透明遮罩、渐变背景、悬浮层或与背景融合的颜色时，rgba() 更实用
- 当设计稿中有“黑色半透底”或“白色文字叠在图上”这类需求，优先考虑 rgba()
兼容性与现代替代方案
rgba() 在现代浏览器中支持良好，但在一些旧版本 IE 中可能显示异常。如果项目需兼容低版本浏览器，可配合 fallback 颜色使用：
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
如今也可以考虑使用 hsl()/hsla() 或 CSS 自定义属性来管理颜色，提升可维护性。不过 rgb/rgba 依然是最直接有效的选择之一。
基本上就这些。掌握 rgb 和 rgba 的核心差异，能让你在布局和视觉设计中更得心应手。
