CSS中RGB和RGBA规则的区别（都接受Alpha值）？答案

【问题标题】：The difference between RGB and RGBA rulle in CSS(both accept Alpha value)?CSS中RGB和RGBA规则的区别（都接受Alpha值）？
【发布时间】：2023-04-02 16:12:02
【问题描述】：

为什么在 CSS 中有两条规则，如 RGB 和 RGBA，因为两条规则都接受 alpha 通道示例：

rgb(0,0,0,0.5);

和

一样

rgba(0,0,0,0.5);

它们都接受 Alpha 值有什么区别？

【问题讨论】：

浏览器知道它是 rgba 并正确渲染，如果你检查你可以在颜色选择器中看到它是 rgba

标签： html css

【解决方案1】：

如果你写rgb(0, 0, 0, 0.5)，有些浏览器使用第四个数字来设置不透明度，但有些不使用。如果你想拥有一种不透明的颜色，并在所有浏览器上真实查看，你需要使用rgba(0, 0, 0, 0.5)

【讨论】：

【解决方案2】：

rgb(0, 0, 0, 0.5) 永远不应该被使用，我不确定它是在哪里引入的以及为什么。但在CSS Color Module Level 4 (Editor’s Draft, 23 January 2019) 中，他们明确表示：

出于遗留原因，rgb() 还支持另一种语法，该语法用逗号分隔所有参数：
  rgb() = rgb( <percentage>#{3} , <alpha-value>? ) |
          rgb( <number>#{3} , <alpha-value>? )

所以它可能出现在草稿中并再次被删除，但在这之间它可能已经由浏览器供应商实施。

使用 css 2.1 rgb(0, 0, 0, 0.5) 无效。并且也被官方css-validator拒绝

使用 css 3 rgb(0, 0, 0, 0.5) 根据规范仍然无效：

css-color-3#rgb-color

函数符号中 RGB 值的格式为“rgb(”，后跟以逗号分隔的三个数值（三个整数值或三个百分比值）列表，后跟“)”。整数值 255 对应于 100%，以及十六进制表示法中的 F 或 FF：rgb(255,255,255) = rgb(100%,100%,100%) = #FFF。数值周围可以有空格字符。

css-validator 似乎接受 rgb(0, 0, 0, 0.5) 并在选择 css 3 时将其验证为 rgb(0 0 0 / 0.5)，但这更多是因为旧版支持。

CSS Color Module Level 4 (Editor’s Draft, 23 January 2019) 引入了rgb(0 0 0 / 0.5) 的格式：

 rgb() = rgb( <percentage>{3} [ / <alpha-value> ]? ) |
         rgb( <number>{3} [ / <alpha-value> ]? )
出于遗留原因，rgb() 还支持另一种语法，该语法用逗号分隔所有参数：
  rgb() = rgb( <percentage>#{3} , <alpha-value>? ) |
          rgb( <number>#{3} , <alpha-value>? )
同样由于遗留原因，还存在一个 rgba() 函数，其语法和行为与 rgb() 相同。

所以根据规范，rgb 用于没有 alpha 的颜色，rgba 用于在 css3 之前有 alpha 的颜色。

之后只使用新语法，但从不使用rgb(0, 0, 0, 0.5)。

所以似乎这个想法是只使用rgb 来统一语法，并在未来摆脱rgba。

【讨论】：