css - CSS 不透明度与 rgba：哪个更好？

Question

假设您将 CSS 不透明度应用于纯色。就内存和性能而言，使用 rgba 值还是颜色+不透明度更好？

Answer 1

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

• rgba()影响CSS 所针对的元素的单个属性，例如color或background-color，并且仅影响这些元素border-color
• opacity影响目标元素及其所有 DOM 树子元素的所有属性（整个外观）

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

根据我的经验，使用属性尤其是动画opacity属性是导致 webkit 浏览器中著名的文本抗锯齿故障的最简单方法（尤其是 Safari，在 Safari 中悬停在 CSS 过渡上会减轻某些字体颜色）。这是因为它opacity影响的不是一个而是整个元素层次结构，浏览器有时无法正确区分哪些元素被重绘。使用时不会出现此类问题rgba()。

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

这些事情的发生是有原因的。从渲染的角度来看，当使用rgba()for color/ background-color/时border-color，我们明确地告诉浏览器哪些 DOM 元素以及哪些元素的图形层受到影响。这使得浏览器更容易确定何时需要重绘。此外，缩小影响范围是性能提升的保证，我通过尝试这两种选项并注意到使用该网站rgba()而不是opacity感觉明显更流畅来证实这一点，尤其是在 Safari 和 Opera 上。

当然，像褪色图像这样的事情是无法实现的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()(or hsla()) 函数执行此操作。

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

Answer 3

首先，你必须知道这rgb()是跨浏览器，但是根据你的情况选择透明度rgba()，opacity()如果你有一个带有 DOM 树子的分区并且你不想让它的孩子变得透明更好rgba()但是如果它是一个孤独的分区我更喜欢使用opacity().

因为浏览器使用硬件加速进行渲染opacity()。 filter: alfa(opacity=x)相同，opacity()但它适用于 IE8 和更早版本。

这rgba()是一个强制浏览器计算颜色的功能，但不使用 GPU 加速，如果您rgba()在页面中频繁使用，您的浏览器可能会运行得很慢。如果您使用简单的颜色，我更喜欢使用十六进制颜色，因为它是预先计算的颜色，浏览器不会计算，只是绘制它。

毕竟，如果你的情况要求你使用rgba()但你想要 GPU 加速，你可以使用transform: translateZ(0);，除了你的浏览器强制使用 GPU 什么都不会发生。这是一个提高性能的技巧，但不要经常使用它。

注意：transparent颜色映射到的键rgba(0, 0, 0, 0)。它只是一个键，而不是一个确切的值。

Answer 4

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

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

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