CSS不透明度vs rgba：哪一个更好？

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

解决方法

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

> rgba()会影响CSS所针对的元素的单个属性，如颜色，背景颜色或边框颜色，仅影响这些元素
> opacity会影响目标元素的所有属性(整个展望)以及其所有DOM树子项

然而，使用这些中的任何一个可以实现许多效果，并且性能/兼容性确实不同，所以这个问题不是无意义的。

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

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

这些事情出于某种原因。从渲染的角度来看，当使用rgba()颜色/ background-color / border-color时，我们会明确地告诉浏览器哪些DOM元素和哪些图形层的元素会受到影响。这使得浏览器更容易弄清楚何时需要重新绘制。此外，缩小效果区域是提升性能的保证，我已经通过尝试这两个选项确认，并注意到使用rgba()代替不透明度的网站感觉更加平滑，特别是在Safari和Opera上。

当然，使用rgba()(掩码图像不够支持)无法实现像褪色的图像，但对于像简单的透明文本或背景这样的任务，rgba()似乎是一个更好的选择。更加如此，如果与CSS3动画混合。

哦，记住在使用rgba()时总是包含一个回退：

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

原文地址：https://www.jb51.cc/css/218457.html