CSS opacity vs rgba:哪个更好？

Question

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

Answer 1

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

• rgba()影响单个属性,例如color,background-color或border-color由CSS定位的元素,仅影响这些元素
• opacity 影响目标元素及其所有DOM树子元素的所有属性(整个视图)

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

根据我的经验,使用特别是动画opacity属性是导致webkit浏览器中着名的文本抗锯齿故障的最简单方法(特别是Safari,在Safari中的Hovering over CSS过渡会减轻某些字体颜色).这是因为opacity影响不是一个而是整个层次结构的元素和浏览器有时无法正确区分哪些元素被重绘.使用时不会出现这样的问题rgba().

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

这些事情是有原因的.从显示的角度,在使用rgba()了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()(或hsla())函数执行此操作.

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