假设将CSS不透明度应用于纯色。
在内存和性能方面，使用rgba值还是颜色+不透明度更好
正如其他人所说，rgba（）和opacity的工作方式不同：
rgba（）影响CSS目标元素的单个属性，如color、background color或border color，并且仅影响这些元素的opacity影响目标元素的所有属性（整个outlook）及其所有DOM树子级
尽管如此，使用这两种方法中的任何一种都可以实现许多效果，而且性能/兼容性也会有所不同，因此这个问题并非毫无意义
根据我的经验，使用opacity属性，尤其是设置该属性的动画，是导致webkit浏览器中著名的文本抗锯齿故障的最简单方法（尤其是Safari，在Safari中将鼠标悬停在CSS转换上会使某些字体颜色变浅）。这是因为opacity影响的不是一个而是整个元素层次结构，浏览器有时无法正确区分哪些元素被重画。使用rgba（）时不会出现此类问题
此外，Opera的许多版本，包括几乎最新的v12.11，在使用opacity的一些场景时会产生严重的图形故障。最简单的方法是将图像和阴影与页面背景混合，然后将文本和阴影与页面背景混合。我在iOS版Safari上也遇到了类似的问题。同样，rgba（）也没有此类问题
这些事情的发生是有原因的。从渲染的角度来看，当使用rgba（）作为颜色/背景色/边框颜色时，我们会明确告诉浏览器哪些DOM元素以及哪些元素的图形层受到影响。这使得浏览器更容易确定何时需要重新绘制。此外，缩小影响范围是性能提升的保证，我已经尝试了这两种方法，并注意到该网站使用rgba（）代替opacity时，特别是在Safari和Opera上，感觉更加平滑
当然，使用rgba（）（mask image没有得到足够的支持）无法实现图像褪色等功能，但对于简单透明文本或背景等任务，rgba（）似乎是更好的选择。如果与CSS3动画混合使用，情况会更糟
哦，记住在使用rgba（）时要始终包含一个回退：
.el{
颜色：rgb（0,0,0）；
颜色：rgba（0,0,0,0.5）；
}