CSS 不透明度与 rgba：哪个更好？答案

【问题标题】：CSS opacity vs rgba: which one is better?CSS 不透明度与 rgba：哪个更好？
【发布时间】：2012-11-03 08:13:37
【问题描述】：

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

【问题讨论】：

他们做不同的事情——“更好”是没有意义的。

标签： css

【解决方案1】：

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

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

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

【讨论】：

我不明白为什么会发生这种情况，您能否在回答中提供一个示例来说明这是如何发生的？
例如，使用 wicked_pdf 生成 pdf 时

【解决方案2】：

首先，你必须知道rgb() 是跨浏览器的，但是如果你有一个与DOM 树的孩子的划分并且你不想做，那么根据你的情况在rgba() 和opacity() 之间选择透明度透明它的孩子最好选择rgba()，但如果它是一个孤独的部门，我更喜欢使用opacity()。

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

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

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

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

【讨论】：

【解决方案3】：

正如其他人所说，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() 没有此类问题。

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

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

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

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

【讨论】：

【解决方案4】：

opacity 仅适用于整个元素，因此您不能使用 opacity 属性将 Alpha 通道应用于颜色。您只能使用rgba()（或hsla()）函数来做到这一点。

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

【讨论】：