CSS中RGB和RGBA rulle之间的区别（都接受Alpha值）？

Question

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

rgb(0,0,0,0.5);

是相同的

rgba(0,0,0,0.5);

当他们都接受阿尔法价值时，差异是什么？

Answer 1

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

Answer 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 3，css-validator似乎接受rgb(0, 0, 0, 0.5)并将其验证为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用于alpha的颜色直到css3。

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

因此，似乎这个想法是仅使用rgb来统一语法，并在将来摆脱rgba。