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

问题描述

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

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

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

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

这是我的片段

/* texts */
.one {
  color: rgba(255,200,.5);
}
.oneFive {
  color: rgb(255,.5);
}

/* backgrounds */
.two {
  background-color: rgb(255,0.5);
}
.three {
  background-color: rgba(0,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>

解决方法

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

这与优势无关，但这是 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() 还支持使用逗号分隔其所有参数的替代语法：

按要求回答：

我想说一下，是浏览器将 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

rgba

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

问题描述

这是我的片段

解决方法

相关问答