37

你应该在 CSS 中使用rgba(0, 0, 0, 0)还是为了透明度？rgba(255, 255, 255, 0)

各自的优缺点是什么？

4

4 回答 4

70

该rgba()函数的最后一个参数是“alpha”或“opacity”参数。如果将其设置为0“完全透明”，则前三个参数（red、green和blue通道）无关紧要，因为无论如何您都看不到颜色。

考虑到这一点，我会选择rgba(0, 0, 0, 0)因为：

  1. 打字少了，
  2. 它会在您的 CSS 文件中保留一些额外的字节，并且
  3. 如果 alpha 值更改为不受欢迎的值，您将看到一个明显的问题。

您可以完全避免使用该rgba模型并改用transparent关键字，根据w3.org，它相当于“透明黑色”并且应该计算为rgba(0, 0, 0, 0). 例如：

h1 {
    background-color: transparent;
}

这为您节省了另外几个字节，而您使用透明度的意图是显而易见的（以防不熟悉 RGBA）。

从 CSS3 开始，您可以将transparent关键字用于任何接受颜色的 CSS 属性。

于 2013-04-11T20:49:47.923 回答
9

有两种使用 alpha 存储颜色的方法。第一个与您看到的完全一样，每个组件都保持原样。第二种是使用预乘 alpha，其中颜色值在转换为 0.0-1.0 范围后乘以 alpha；这样做是为了使合成更容易。通常，您不应该注意或关心任何特定引擎实现哪种方式，但在某些极端情况下您可能会这样做，例如，如果您试图增加颜色的不透明度。如果您使用rgba(0, 0, 0, 0)，则不太可能看到两种方法之间的差异。

于 2013-04-11T21:31:14.233 回答
3

当你使用 rgba(255,255,255, a ) 时有一个小的差异，背景颜色随着 ' a ' 的值从 0.0 增加到 1.0变得越来越亮。而当使用 rgba(0,0,0, a ) 时，背景颜色会随着 ' a ' 的值从 0.0 增加到 1.0变得越来越暗。话虽如此，很明显 (255,255,255,0) 和 (0,0,0,0) 都使背景透明。(255,255,255,1) 将使背景完全变白，而 (0,0,0,1) 将使背景完全变黑。

于 2014-05-15T15:54:56.183 回答
1

我建议使用rgba(255,255,255,0)，因为损坏的（最新）Safari 认为，如果您正在使用transparent或rgba(0,0,0,0)在线性渐变中，您的真正意思是gray，有关更多信息，请前往 -在 Safari 中使用透明颜色会发生什么？

于 2020-06-23T10:09:45.577 回答