Question

您是否应该使用rgba(0, 0, 0, 0)或rgba(255, 255, 255, 0)来提高CSS的透明度？

各自的优点和缺点是什么？

Answer 1

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

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

打字少了，
它会从CSS文件中保留一些额外的字节，并且
如果alpha值变为不合需要的东西，你会看到一个明显的问题。

您可以完全避开rgba模式，而是使用transparent关键字，根据w3.org，相当于“透明黑”，应该计算到rgba(0, 0, 0, 0)。例如：

h1 {
    background-color: transparent;
}

这可以节省你的另外几个字节，而你使用透明度的意图是显而易见的（如果一个人不熟悉RGBA）。

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

Answer 2

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

Answer 3

当你使用rgba（255,255,255， a ）时，差异很小，背景颜色变得越来越轻，因为＆＃39; a ＆＃39 ;从0.0增加到1.0。当使用rgba（0,0,0， a ）时，背景颜色变得越来越暗，因为＆＃39; a ＆＃39;从0.0增加到1.0。话虽如此，很明显（255,255,255,0）和（0,0,0,0）都有背景透明。（255,255,255,1）会使背景完全变白，而（0,0,0,1）会使背景完全变黑。

Answer 4

我建议您使用rgba(255,255,255,0)，因为破碎的（最新的）野生动物园认为如果您在线性渐变中使用transparent或rgba(0,0,0,0)，则表示gray的真实含义，信息，请前往-What happens in Safari with the transparent color?

你应该使用rgba（0,0,0,0）或rgba（255,255,255,0）来提高CSS的透明度吗？

4 个答案: