CSS opacity vs rgba：哪个更好？

Question

假设您将CSS不透明度应用于纯色。 在内存和性能方面，使用rgba值或颜色+不透明度是否更好？

Answer 1

正如其他人所说，rgba()和opacity的工作方式不同：

• rgba()会影响CSS定位的元素的单个属性，例如color，background-color或border-color，只会影响这些元素
• opacity会影响目标元素及其所有DOM树孩子的所有属性（整个展望）

尽管如此，使用其中任何一种都可以实现很多效果，性能/兼容性确实会有所不同，所以这个问题并非毫无意义。

根据我的经验，使用并特别设置opacity属性的动画是在webkit浏览器中引起着名文本抗锯齿故障的最简单方法（尤其是Safari，Hovering over CSS transition in Safari lightens certain font color）。这是因为opacity影响的不是一个，而是整个层次结构的元素和浏览器有时无法正确区分哪些元素被重绘。使用rgba()时不会出现此类问题。

此外，许多版本的Opera，包括几乎当前的v12.11，都会产生严重的图形故障，其中包含opacity的一些使用场景。将不透明度与文本，图像背景和文本阴影混合，然后滚动页面或div是重现问题的最简单方法。我在iOS版本的Safari上遇到了类似的问题。同样，rgba()没有这样的问题。

这些事情是有原因的。从渲染的角度来看，当rgba() / color / background-color使用border-color时，我们会明确告诉浏览器哪些DOM元素和哪些图形元素图层受到影响。这使浏览器更容易弄清楚何时需要重新绘制。此外，缩小效果范围是对性能提升的保证，我通过尝试这两个选项并注意到使用rgba()代替opacity的网站感觉非常平滑，特别是在Safari和戏。

当然，使用rgba()（mask-image不够支持）无法实现淡化图像等功能，但对于简单透明文字或背景等任务，rgba()似乎更好选择。如果与CSS3动画混合，更是如此。

哦，记得在使用rgba()时总是包含一个后备：

.el {
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.5);
}

Answer 2

opacity仅适用于整个元素，因此您无法使用opacity属性将Alpha通道应用于颜色。您只能使用rgba()（或hsla()）函数执行此操作。

所以rgba() / hsla()在所有方面都更好，因为这是唯一的方法。

Answer 3

rgba解决方案可提供更好的显示质量。示例：

#opacity {
  color: rgba(0, 0, 0, 0.5); // good quality //
}

#opacity {
  opacity: 0.5; // bad quality //
}

Answer 4

首先，您必须知道rgb()是跨浏览器，但在rgba()和opacity()之间选择透明度取决于您的情况，如果您与DOM树儿童和您有分歧不要让孩子更好地选择rgba()，但如果它是一个孤独的师，我更喜欢使用opacity()。

因为浏览器使用Hardware Acceleration来呈现opacity()。 filter: alfa(opacity=x)与opacity()相同，但适用于IE8及更早版本。

rgba()是强制浏览器计算颜色但不使用GPU加速的功能，如果在页面中经常使用rgba()，则浏览器的工作速度可能会很慢。如果您使用简单的颜色，我更喜欢使用十六进制颜色，因为它是预先计算的颜色，浏览器不会计算并只绘制它。

毕竟，如果你的情况召唤你使用rgba()，但你想要GPU加速，你可以使用transform: translateZ(0);，没有任何事情发生，但你的浏览器强迫使用GPU。这是一个提高性能的技巧，但不要经常使用它。

Note：用于颜色映射的transparent键到rgba（0,0,0,0）。它只是一个关键，而不是一个确切的价值。