【问题标题】:Should you use rgba(0, 0, 0, 0) or rgba(255, 255, 255, 0) for transparency in CSS?你应该使用 rgba(0, 0, 0, 0) 还是 rgba(255, 255, 255, 0) 在 CSS 中实现透明度?
【发布时间】:2013-04-04 05:24:49
【问题描述】:

您应该使用rgba(0, 0, 0, 0)rgba(255, 255, 255, 0) 来实现CSS 的透明度吗?

各有什么优缺点?

【问题讨论】:

  • 如果您要修改不透明度,一个是白色的,一个是黑色的。否则它仍然是透明的。你有什么场景甚至提出这个问题?
  • "@JackManey “这有什么关系?”我不知道。这就是我问的原因。

标签: css colors


【解决方案1】:

rgba() 函数的最后一个参数是“alpha”或“opacity”参数。如果将其设置为0,则表示“完全透明”,前三个参数(redgreenblue 通道)无关紧要,因为您将无法看到反正颜色。

考虑到这一点,我会选择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 开始,您可以对任何接受颜色的 CSS 属性使用 transparent 关键字。

【讨论】:

    【解决方案2】:

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

    【讨论】:

    • 这是正确答案。具体来说,在使用渐变时,“在某些极端情况下,例如,如果您尝试增加颜色的不透明度”这部分内容尤其正确,因为图像值模块requires 计算了渐变颜色一个预乘的 RGBA 空间。但请注意,不同浏览器的实现仍然不同——特别是,一些最新版本仍然违反规范中的要求(尽管公平地说,我相信直到最近的修订版才指定)。
    【解决方案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) 会使背景完全变黑。

    【讨论】:

    • 这并不能真正回答问题,并且在任何情况下都不包含该问题的至少一个其他答案尚未提供的信息。
    • 你怎么能说它没有回答这个问题!我试图解释 rgba() 背后的概念,以便理解优缺点。
    • 您解释了 rgba(...) 的作用,但这不是 OP 所要求的。看看这个问题的其他答案,它们和你的完全不同。
    • 我实际上发现这很有帮助。我有一个相关的问题,虽然不完全;y 相同,并且发布新问题效率低下。我同意对概念的解释比没有理解的简单 Pro/Con 列表更重要。
    【解决方案4】:

    我建议使用rgba(255,255,255,0),因为损坏的(最新)Safari 认为,如果您在线性渐变中使用transparentrgba(0,0,0,0),您的真正意思是gray,有关更多信息,请前往-What happens in Safari with the transparent color?

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-07-09
      • 1970-01-01
      • 1970-01-01
      • 2012-04-21
      • 1970-01-01
      • 2020-06-26
      相关资源
      最近更新 更多