【发布时间】:2013-04-04 05:24:49
【问题描述】:
您应该使用rgba(0, 0, 0, 0) 或rgba(255, 255, 255, 0) 来实现CSS 的透明度吗?
各有什么优缺点?
【问题讨论】:
-
如果您要修改不透明度,一个是白色的,一个是黑色的。否则它仍然是透明的。你有什么场景甚至提出这个问题?
-
"@JackManey “这有什么关系?”我不知道。这就是我问的原因。
您应该使用rgba(0, 0, 0, 0) 或rgba(255, 255, 255, 0) 来实现CSS 的透明度吗?
各有什么优缺点?
【问题讨论】:
rgba() 函数的最后一个参数是“alpha”或“opacity”参数。如果将其设置为0,则表示“完全透明”,前三个参数(red、green 和blue 通道)无关紧要,因为您将无法看到反正颜色。
考虑到这一点,我会选择rgba(0, 0, 0, 0),因为:
您可以完全避免使用rgba 模型并改用transparent 关键字,根据w3.org,它相当于“透明黑色”并且应该计算为rgba(0, 0, 0, 0)。例如:
h1 {
background-color: transparent;
}
这可以为您节省另外几个字节,而您使用透明度的意图是显而易见的(以防不熟悉 RGBA)。
从 CSS3 开始,您可以对任何接受颜色的 CSS 属性使用 transparent 关键字。
【讨论】:
有两种方法可以使用 alpha 存储颜色。第一个与您看到的完全一样,每个组件都保持原样。第二种是使用pre-multiplied alpha,其中颜色值在转换为0.0-1.0范围后乘以alpha;这样做是为了让compositing 更容易。通常,您不应该注意或关心任何特定引擎实现哪种方式,但在某些极端情况下您可能会这样做,例如,如果您试图增加颜色的不透明度。如果您使用rgba(0, 0, 0, 0),则不太可能看到这两种方法之间的差异。
【讨论】:
当你使用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(...) 的作用,但这不是 OP 所要求的。看看这个问题的其他答案,它们和你的完全不同。
我建议使用rgba(255,255,255,0),因为损坏的(最新)Safari 认为,如果您在线性渐变中使用transparent 或rgba(0,0,0,0),您的真正意思是gray,有关更多信息,请前往-What happens in Safari with the transparent color?
【讨论】: