rgb() 和 rgba() 不透明度有啥区别？

Posted 2023-03-06

【中文标题】rgb() 和 rgba() 不透明度有啥区别？

【英文标题】：What is the difference between rgb() and rgba() opacity?rgb() 和 rgba() 不透明度有什么区别？

【发布时间】：2021-05-07 06:47:29

【问题描述】：

我在 SO 上发现了另一个关于 rgb 与 rgba 非常相似的问题，但它缺少关于 rgb with opacity 用法的答案。

我知道两者之间的区别——rgba 只是 rgb，但使用 alpha 表示不透明度。问题是，我使用具有不透明度值的 rgb 已经几个月甚至几年了。它一直对我有用。 rgb(255, 0, 255, 0.5)

让我想知道如果两者的工作方式相同，使用一个是否有优势？ rgb 已经存在了更长时间，所以我认为浏览器兼容性更好？一位同事还告诉我 rgba 值仅适用于背景颜色，但话又说回来，我在 codepen 中做了一些测试，它适用于 Edge 和 Chrome。

（我知道两者都是基于 Chrome 的，这两个都是我下载的）

相关问题：What are differences between RGB vs RGBA other than 'opacity'

---

这是我的 sn-p

/* texts */
.one 
  color: rgba(255, 200, 0, .5);

.oneFive 
  color: rgb(255, 200, 0, .5);


/* backgrounds */
.two 
  background-color: rgb(255, 0, 255, 0.5);

.three 
  background-color: rgba(0, 0, 255, 0.5);




/*          */
/* settings */
/*          */
.two, .three 
  height: 50px;

.two 
  margin-top: 30px;

.two, .three, .zero 
  color: white;

.one, .oneFive 
  height: 50px;
  font-weight: bold;
  font-size: 2em;
  padding-left: 40px;
  padding-top: 20px;

body  
  background-color: #444; 
  color: white; 

.zero 
  background-color: darkgreen;
  width: 300px;
  height: 350px;
  position: absolute;
  top: 35px;
  z-index: -1;

dark grey 100% opacity

<div class="zero">dark green 100% opacity</div>

<div class="oneFive">rgb yellow text 70% opacity</div>
<div class="one">rgba yellow text 70% opacity</div>

<div class="two">rgb 50% background opacity</div>
<div class="three">rgba 50% background opacity</div>

【问题讨论】：

我要冒昧地说这是浏览器在翻译 rgb 中设置的不正确值，并带有不透明度值。如果您查看计算选项卡下的浏览器开发工具，您会注意到rgb 的值被计算为rgba。我认为任何支持 CSS3 的浏览器都会“修复”该属性。 另外一位同事告诉我 rgba 值仅适用于背景颜色你的同事错了。

rgb 存在的时间更长，所以我认为浏览器兼容性更好？ 我不会这么说。您永远不会注意到性能下降，但如果您的浏览器不必“修复”传递给 rgb 集合的不正确值，您将减少浏览器的工作量。

developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors

@disinfor 感谢您这么快回答。我确实检查了控制台的 rgb 值。 Chrome似乎不需要修复它。 (screencast.com/t/8essnzkacA)。我看到 rgba 是自 CSS Level 4 以来 rgb 的别名。我猜大多数流行的浏览器都是这样。如果您可以将您的回复捆绑为答案，我会接受它，因为它为我提供了我需要的信息。谢谢！

我认为 RGBA 用于保存添加不透明度的另一个 CSS 属性。如果我们想为任何元素添加不透明的颜色或不透明的背景，rgba 将是最佳选择，因为我们不会编写不透明属性。所以节省了一行代码。

【参考方案1】：

按要求回答：

我会说是浏览器翻译了rgb 中设置的“不正确”值，并带有不透明度值。

如果您查看计算选项卡下的浏览器开发工具，您会注意到 rgb 值被计算为 rgba（至少在 Firefox 中）。

我认为任何支持 CSS3 的浏览器都会“修复”该属性。

另外一位同事告诉我 rgba 值仅适用于背景颜色：你的同事错了。

rgb 存在的时间更长，所以我认为浏览器兼容性更好？ 我不会这么说。您永远不会注意到性能下降，但如果您的浏览器不必“修复”传递给rgb 集的不正确值，您将减少浏览器的工作量。 更新：rgba 是rgb 的别名，所以它真的没有修复任何东西，它只是传递给rgb。

这里有一些关于 rgb 和 rgba 的文档 - 特别是函数的别名：

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors

【参考方案2】：

让我想知道如果两者的工作方式相同，使用一个是否有优势？

这不是关于优势，而是the Specification 中新定义的东西

rgb() 和 rgba()，hsl() 和 hsla() 现在是彼此的别名（它们都有一个可选的 alpha）。 ^ref

和

同样由于遗留原因，还存在一个 rgba() 函数，其语法和行为与 rgb() 相同。 ^ref

所以rgba() 意味着要消失，只应该使用rgb()，但这不会发生，因为它会产生很多问题和冲突，所以rgba() 仍然会被考虑并且只会使用相同的语法如rgb()

另请注意，新语法不再包含逗号：

rgb() = rgb( <percentage>3 [ / <alpha-value> ]? ) |
  rgb( <number>3 [ / <alpha-value> ]? )
<alpha-value> = <number> | <percentage>

例如，您应该编写 rgb(255 65 40) 或 rgb(255 65 40 / 80%)，但由于遗留原因，仍然支持逗号语法：

出于遗留原因，rgb() 还支持另一种语法，该语法用逗号分隔所有参数：