CSS opacity vs rgba：哪一个更好？ [英] CSS opacity vs rgba: which one is better?

问题描述

假设您要对纯色应用CSS透明度。
在内存和性能方面，使用rgba值或颜色+不透明度更好吗？

解决方案

正如其他人所说， rgba（）和 opacity 工作方式不同：

• rgba（）会影响单个属性，例如 color code> background-color 或 border-colour ，仅限于这些元素


• opacity 会影响目标元素的所有属性（整个展望）及其所有DOM树子

仍然，使用这些和性能/兼容性确实可以实现许多效果，所以这个问题是没有意义的。 / p>

根据我的经验，使用和特别是动画化 opacity 属性是导致着名文本抗锯齿毛刺的最简单的方法webkit浏览器（尤其是Safari，在Safari中悬停CSS转换减轻某些字体颜色）。这是因为 opacity 不影响元素和浏览器的整个层次结构，有时无法正确区分重绘的元素。使用 rgba（）时不会出现此类问题。

此外，许多版本的Opera，包括几乎当前的v12 .11，使用 opacity 的一些使用场景产生严重的图形毛刺。混合不透明度与文本，图像背景和文本阴影，然后滚动页面或div是复制问题的最简单的方法。我在iOS版本的Safari上也出现了类似的问题。再次，没有这样的问题与 rgba（）。

这些事情发生的原因。从渲染的角度来看，当使用 rgba（）为 color / / border-color ，我们告诉浏览器哪些DOM元素和哪些图形图层的元素会受到影响。这使得浏览器更容易找出他们需要重新绘制的时间。此外，缩小效果区域是对性能提升的保证，我已通过尝试这两个选项并注意到网站使用 rgba（）代替<$

当然，像褪色的图片这样的东西不能用<$ c来实现，因为c $ c> opacity $ c> rgba（）（ mask-image 不够支持），但对于像简单透明文本或背景这样的任务， rgba（）似乎是一个更好的选择。

当你使用 rgba（）：

  .el {
 color：rgb（0，0，0）; 
 color：rgba（0，0，0，0.5）; 
} 
  

Assuming you're applying a CSS opacity to a solid color. Is it better, in terms of memory and performance, to use an rgba value or the color+opacity?

解决方案

As others have stated, rgba() and opacity work differently:

• rgba() affects a single property, like color, background-color or border-color, of a elements targeted by CSS and only of these elements
• opacity affects all properties (the whole outlook) of targeted elements along with all their DOM tree children

Still, many effects can be achieved using either of these and the performance/compatibility does vary so this question is not pointless.

From my experience, using and especially animating the opacity property is the easiest way to cause the famous text antialiasing glitch in webkit browsers (especially Safari, Hovering over CSS transition in Safari lightens certain font color). This is due to the fact that opacity affects not one but a whole hierarchy of elements and browsers sometimes fail to properly distinguish which elements are redrawn. No such problems happen when using rgba().

Furthermore, many versions of Opera, including the almost current v12.11, produce serious graphical glitches with some usage scenarios of opacity. Mixing opacity with text, image backgrounds and text shadows and then scrolling the page or div is the easiest way to reproduce the issue. A similar problem occurred for me on the iOS version of Safari. Again, no such issues with rgba().

These things happen for a reason. From the rendering point of view, when using rgba() for color/background-color/border-color, we tell the browser explicitly which DOM elements and which graphical layers of elements are affected. This makes it much easier for browsers to figure out when they need to get redrawn. Also, narrowing down the area of effect is a warranty of performance boost, which I've confirmed by trying both options and noticing that website using rgba() in place of opacity felt noticably smoother, especially on Safari and Opera.

Sure, things like fading images cannot be achieved with rgba() (mask-image not being supported enough), but for tasks like simple transparent text or background, rgba() seems to be a better choice. Even more so if mixed with CSS3 animation.

Oh, and remember to always include a fallback when using rgba():

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

这篇关于CSS opacity vs rgba：哪一个更好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！