什么是 RGBA颜色？
RGBA颜色是 RGB 模型的扩展，增加了 alpha 通道控制透明度。格式为 rgba(R, G, B, A)，其中 RGB 值范围 0-255，alpha 值 0-1 表示从完全透明到完全不透明。广泛用于创建遮罩层、阴影、毛玻璃效果等半透明设计元素。
快速了解
| 全称 | 红绿蓝透明度颜色模型 |
|---|---|
| 创建时间 | 2008 年（CSS3 颜色模块） |
| 规范文档 | 官方规范 |
工作原理
RGBA 通过添加第四个分量——alpha 通道来扩展标准 RGB 颜色模型，用于控制颜色的不透明度。RGB 使用三个值（0-255）表示红、绿、蓝，而 RGBA 添加了第四个介于 0 到 1（或 0% 到 100%）之间的值来表示透明度。alpha 值为 0 表示颜色完全透明，而 1（或 100%）表示完全不透明。RGBA 对于创建分层视觉效果、遮罩层、阴影以及任何需要半透明颜色的设计元素都是必不可少的。在 CSS 中，RGBA 颜色写作 rgba(red, green, blue, alpha)，例如 rgba(255, 0, 0, 0.5) 表示半透明红色。现代 CSS 还支持更易读的新语法 rgb(255 0 0 / 50%)。
主要特点
- 四个分量：红、绿、蓝（0-255）和 Alpha（0-1）
- Alpha 通道控制透明度/不透明度
- Alpha 值为 0 = 完全透明，1 = 完全不透明
- 分层设计和遮罩层的必备选择
- 所有现代浏览器和设计工具都支持
- 可与带 alpha 的十六进制格式互转（#RRGGBBAA）
常见用途
- 创建半透明遮罩层和背景
- 设计投影和毛玻璃效果
- 构建可透视内容的模态框背景
- 带颜色过渡的悬停效果
- 水印和细微设计元素
示例
Loading code...常见问题
RGBA 中的 alpha 值代表什么？
alpha 值代表颜色的不透明度，范围从 0（完全透明）到 1（完全不透明）。值为 0.5 表示颜色为 50% 透明，允许背景内容透过显示。
如何在 CSS 中编写 RGBA 颜色？
在 CSS 中，可以将 RGBA 颜色写作 rgba(red, green, blue, alpha)，例如 rgba(255, 0, 0, 0.5) 表示半透明红色。现代 CSS 还支持语法 rgb(255 0 0 / 50%)，更易读。
可以将 RGBA 转换为十六进制吗？
可以，使用 8 位十六进制格式 #RRGGBBAA。alpha 值从 0-1 转换为 00-FF。例如，rgba(255, 0, 0, 0.5) 变为 #FF000080，其中 80（十六进制）= 128 = 约 50% 不透明度。
CSS opacity 属性和 RGBA alpha 有什么区别？
CSS opacity 属性会影响整个元素及其所有子元素，而 RGBA alpha 只影响应用它的特定颜色属性。使用 RGBA 可以让背景半透明，同时保持文本完全不透明。
什么时候应该使用 RGBA 而不是 RGB？
当需要半透明颜色时使用 RGBA，例如遮罩层背景、毛玻璃效果、阴影、悬停状态，或任何需要部分透视底层内容的设计元素。