rgb用于定义不透明颜色，由红绿蓝三原色组成；rgba在rgb基础上增加透明度参数（0-1），可实现半透明效果，适用于背景叠加、遮罩层等需要视觉融合的场景。
在css中，rgb 和 rgba 都是用来定义颜色的函数，它们的核心区别在于是否支持透明度控制。理解这一点对实现更灵活的视觉效果非常关键。
rgb：纯色表示，无透明度
rgb(红, 绿, 蓝) 接收三个0到255之间的数值，分别代表红、绿、蓝三原色的强度。它只能表示不透明的颜色。
例如：
-
rgb(255, 0, 0)表示纯红色 -
rgb(0, 128, 255)表示一种蓝色
这种写法适用于所有不需要透明背景或文字的场景。
立即学习“前端免费学习笔记（深入）”；
rgba：扩展rgb，支持透明度
rgba(红, 绿, 蓝, 透明度) 在rgb的基础上增加第四个参数——alpha通道，取值范围是 0 到 1，用于控制颜色的透明程度。
例如：
-
rgba(255, 0, 0, 0.5)是半透明的红色 -
rgba(0, 0, 0, 0.8)是接近不透明的黑色文字，常用于遮罩层 -
rgba(255, 255, 255, 0)完全透明，等同于 transparent
这个特性非常适合做背景叠加、渐变蒙版或悬浮层的视觉融合。
透明度使用技巧
合理使用rgba能显著提升界面层次感和可读性。
- 用半透明背景提升文字可读性：比如在图片上叠加
rgba(0, 0, 0, 0.6)的遮罩层，再放白色文字 - 创建柔和的边框或阴影：
border: 1px solid rgba(0, 0, 0, 0.2)比纯黑边框更自然 - 渐变中混合透明色：线性渐变里使用rgba可以让过渡更平滑
- 避免过度透明：alpha值太低（如小于0.1）可能影响视觉识别
基本上就这些。rgb适合常规着色，rgba则提供了更多设计自由度，特别是在需要视觉叠加的场景中。掌握两者的区别和应用场景，能让CSS配色更精准有效。