你应该使用 rgba(0, 0, 0, 0) 还是 rgba(255, 255, 255, 0) 来实现 CSS 的透明度?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15958565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:24:41  来源:igfitidea点击:

Should you use rgba(0, 0, 0, 0) or rgba(255, 255, 255, 0) for transparency in CSS?

csscolors

提问by Joe

Should you use rgba(0, 0, 0, 0)or rgba(255, 255, 255, 0)for transparency in CSS?

你应该在 CSS 中使用rgba(0, 0, 0, 0)rgba(255, 255, 255, 0)透明度吗?

What are the pros and cons of each?

各自的优缺点是什么?

回答by C???

The last parameter to the rgba()function is the "alpha" or "opacity" parameter. If you set it to 0it will mean "completely transparent", and the first three parameters (the red, green, and bluechannels) won't matter because you won't be able to see the color anyway.

rgba()函数的最后一个参数是“alpha”或“opacity”参数。如果你把它设置为0那将意味着“完全透明”,和前三个参数(redgreen,和blue信道)并不重要,因为你将无法看到的颜色呢。

With that in mind, I would choose rgba(0, 0, 0, 0)because:

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

  1. it's less typing,
  2. it keeps a few extra bytes out of your CSS file, and
  3. you will see an obvious problem if the alpha value changes to something undesirable.
  1. 打字少了,
  2. 它从你的 CSS 文件中保留了一些额外的字节,并且
  3. 如果 alpha 值更改为不受欢迎的值,您将看到一个明显的问题。

You couldavoid the rgbamodel altogether and use the transparentkeyword instead, which according to w3.org, is equivalent to "transparent black" and should compute to rgba(0, 0, 0, 0). For example:

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

h1 {
    background-color: transparent;
}

This saves you yet another couple bytes while your intentions of using transparency are obvious (in case one is unfamiliar with RGBA).

这为您节省了另外几个字节,而您使用透明度的意图很明显(以防不熟悉 RGBA)。

As of CSS3, you can use the transparentkeyword for any CSS property that accepts a color.

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

回答by Mark Ransom

There are two ways of storing a color with alpha. The first is exactly as you see it, with each component as-is. The second is to use pre-multiplied alpha, where the color values are multiplied by the alpha after converting it to the range 0.0-1.0; this is done to make compositingeasier. Ordinarily you shouldn't notice or care which way is implemented by any particular engine, but there are corner cases where you might, for example if you tried to increase the opacity of the color. If you use rgba(0, 0, 0, 0)you are less likely to to see a difference between the two approaches.

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

回答by Rahul Goyal

There a small difference when u use rgba(255,255,255,a),background color becomes more and more lighter as the value of 'a' increase from 0.0 to 1.0. Where as when use rgba(0,0,0,a), the background color becomes more and more darker as the value of 'a' increases from 0.0 to 1.0. Having said that, its clear that both (255,255,255,0) and (0,0,0,0) make background transparent. (255,255,255,1) would make the background completely white where as (0,0,0,1) would make background completely black.

当你使用 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) 会使背景完全黑色。