RGB和RGBA是CSS中常用的颜色表示方法，RGB通过红、绿、蓝三原色数值定义颜色，适用于无透明度需求的场景；RGBA在RGB基础上增加Alpha通道控制透明度，取值0到1，实现半透明效果，广泛用于遮罩、渐变和阴影等设计。浏览器会将RGBA颜色与底层内容混合渲染，影响最终视觉表现，因此需注意父元素背景的影响。现代浏览器普遍支持RGBA，但为兼容旧版IE可提供RGB回退方案，Alpha值推荐使用小数形式。掌握二者有助于精准控制网页色彩与层次。
在CSS中，颜色可以通过多种方式定义，其中 RGB 和 RGBA 是最常用的方法之一。它们不仅能够精确控制颜色，还能通过透明度实现丰富的视觉效果。
RGB颜色表示法
RGB代表红（Red）、绿（Green）、蓝（Blue），是一种基于光的三原色模型。在CSS中，使用函数 rgb() 来定义颜色，括号内包含三个0到255之间的数值，分别对应红、绿、蓝的强度。
例如：
- rgb(255, 0, 0) 表示纯红色
- rgb(0, 128, 0) 表示深绿色
- rgb(0, 0, 255) 表示纯蓝色
- rgb(255, 255, 255) 表示白色
- rgb(0, 0, 0) 表示黑色
这种表示方法适用于所有不需要透明度的场景，比如背景色、文字颜色等。
立即学习“前端免费学习笔记（深入）”；
RGBA：带透明度的RGB
RGBA是在RGB基础上增加了一个Alpha通道，用于控制颜色的透明度。Alpha值是一个介于0到1之间的数，0表示完全透明，1表示完全不透明。
语法为：rgba(red, green, blue, alpha)
常见用法示例：
- rgba(255, 0, 0, 0.5) 红色半透明
- rgba(0, 0, 0, 0.8) 黑色，轻微透明
- rgba(255, 255, 255, 0.3) 白色叠加在背景上形成朦胧感
RGBA特别适合用于背景叠加、遮罩层、按钮悬停效果等需要层次感的设计。
透明度与颜色混合的实际应用
当使用RGBA设置元素颜色或背景时，浏览器会自动将该颜色与底层内容进行混合渲染。这意味着透明颜色不会单独存在，而是和其“背后”的颜色融合。
典型应用场景包括：
- 模态框的半透明遮罩层：background: rgba(0, 0, 0, 0.6);，既能突出弹窗，又不会完全遮挡页面内容
- 渐变背景中的透明过渡：background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.2))，营造视觉纵深感
- 文本阴影或边框使用透明黑：text-shadow: 0 1px 2px rgba(0,0,0,0.3)，比纯黑更自然
注意：父元素的背景会影响RGBA颜色的最终显示效果，设计时需考虑整体布局。
小贴士与兼容性说明
现代浏览器都支持RGBA，但在一些旧版本IE（如IE8及以下）中不被识别。如果需要兼容老浏览器，可提供fallback方案：
background: rgb(255, 0, 0); /* 老浏览器显示红色 */ background: rgba(255, 0, 0, 0.5); /* 支持的浏览器显示半透明红 */
另外，Alpha值可以写成小数（如0.5）或百分比（如50%），但CSS标准推荐使用小数形式。
基本上就这些。掌握RGB与RGBA，能让你更灵活地控制网页色彩与层次表现。
