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?
假设你将CSS的不透明度应用于纯色。在内存和性能方面，使用rgba值还是颜色+不透明度更好?
3 个解决方案
#1
28
As others have stated, rgba() and opacity work differently:
正如其他人所说，rgba()和不透明的工作方式不同:
-
rgba()affects a single property, likecolor,background-colororborder-color, of a elements targeted by CSS and only of these elements - rgba()只影响CSS目标元素的颜色、背景色或边框色等单个属性，只影响这些元素的颜色
-
opacityaffects all properties (the whole outlook) of targeted elements along with all their DOM tree children - 不透明度影响目标元素的所有属性(整个外观)及其所有DOM树子元素
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().
根据我的经验，使用和特别是动画不透明属性是导致webkit浏览器中著名的文本反锯齿故障的最简单的方法(特别是Safari，在Safari中悬停在CSS转换上方，会使某些字体颜色变浅)。这是由于不透明度影响的不是一个，而是整个层次的元素和浏览器有时不能正确区分哪些元素被重新绘制。使用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().
此外，许多版本的Opera，包括几乎当前的v12.11，都产生了一些严重的图形故障，有些使用不透明的情况。将不透明度与文本、图像背景和文本阴影混合，然后滚动页面或div是重现问题的最简单方法。在iOS版本的Safari浏览器上，我遇到了类似的问题。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.
这些事情的发生是有原因的。从呈现的角度来看，当使用rgba()作为颜色/背景颜色/边框颜色时，我们会显式地告诉浏览器哪些DOM元素和哪些图形元素层受到影响。这使得浏览器更容易判断何时需要重新绘制。此外，缩小效果区域是性能提升的保证，我通过尝试这两种选项确认了这一点，并注意到使用rgba()代替不透明的网站感觉非常平滑，特别是在Safari和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.
当然，像褪色图像这样的东西不能用rgba()来实现(mask-image没有得到足够的支持)，但是对于简单的透明文本或背景的任务来说，rgba()似乎是一个更好的选择。如果与CSS3动画混合，效果会更好。
Oh, and remember to always include a fallback when using rgba():
噢，记住在使用rgba()时一定要有一个后备选择:
.el {
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 0.5);
}
#2
9
opacity only applies to entire elements, so you cannot apply an alpha channel to a color using the opacity property. You can only do that with the rgba() (or hsla()) function.
不透明度只适用于整个元素，因此不能使用不透明度属性对颜色应用alpha通道。您只能使用rgba()(或hsla())函数。
So rgba()/hsla() is better in all aspects because that's the only way to do it.
rgba()/hsla()在所有方面都更好，因为这是唯一的方法。
#3
1
At first you must know that rgb() is cross-browser, but choosing transparency between rgba() and opacity() depend on your case, if you have a division with DOM tree children and you don't wanna make transparent its children better choose rgba() but if it's a lonely division I prefer use opacity().
首先，您必须知道rgb()是跨浏览器的，但是在rgba()和透明度()之间选择透明度取决于您的情况，如果您有一个与DOM tree子元素的划分，并且您不想让它的子元素透明，最好选择rgba()，但是如果它是一个单独的划分，我更喜欢使用不透明()。
Because browsers use Hardware Acceleration for rendering opacity(). filter: alfa(opacity=x) is same as opacity() but it is for IE8 and earlier versions.
因为浏览器使用硬件加速来渲染不透明度()。过滤器:alfa(不透明度=x)与不透明度()相同，但它适用于IE8和早期版本。
The rgba() is a function that forces browsers to calculate a color, but not using GPU Acceleration, and if you use rgba() frequently in a page maybe your browser work pretty slow. If you use a simple color I prefer use hexadecimal color, because it is a pre calculated color and browsers don't calculate and just paint it.
rgba()是一个迫使浏览器计算颜色的函数，但不使用GPU加速，如果你经常在页面中使用rgba()，你的浏览器可能运行得很慢。如果您使用简单的颜色，我更喜欢使用十六进制颜色，因为它是预先计算的颜色，浏览器不计算，只绘制它。
After all, if your case summon you to use rgba() but you wanna GPU Acceleration, you can use transform: translateZ(0);, nothing happen but your browser force to use GPU. it is a trick for better performance, but don't use it frequently.
毕竟，如果您的案例召唤您使用rgba()，但您想要GPU加速，您可以使用transform: translateZ(0);除了浏览器强制使用GPU之外，什么都没有发生。这是一个提高性能的技巧，但是不要经常使用它。
Note: the transparent key for color maps to rgba(0,0,0,0). it's just a key, not a exact value.
注意:颜色映射到rgba的透明键(0,0,0,0,0)。它只是一个键，不是一个确切的值。
#1
28
As others have stated, rgba() and opacity work differently:
正如其他人所说，rgba()和不透明的工作方式不同:
-
rgba()affects a single property, likecolor,background-colororborder-color, of a elements targeted by CSS and only of these elements - rgba()只影响CSS目标元素的颜色、背景色或边框色等单个属性，只影响这些元素的颜色
-
opacityaffects all properties (the whole outlook) of targeted elements along with all their DOM tree children - 不透明度影响目标元素的所有属性(整个外观)及其所有DOM树子元素
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().
根据我的经验，使用和特别是动画不透明属性是导致webkit浏览器中著名的文本反锯齿故障的最简单的方法(特别是Safari，在Safari中悬停在CSS转换上方，会使某些字体颜色变浅)。这是由于不透明度影响的不是一个，而是整个层次的元素和浏览器有时不能正确区分哪些元素被重新绘制。使用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().
此外，许多版本的Opera，包括几乎当前的v12.11，都产生了一些严重的图形故障，有些使用不透明的情况。将不透明度与文本、图像背景和文本阴影混合，然后滚动页面或div是重现问题的最简单方法。在iOS版本的Safari浏览器上，我遇到了类似的问题。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.
这些事情的发生是有原因的。从呈现的角度来看，当使用rgba()作为颜色/背景颜色/边框颜色时，我们会显式地告诉浏览器哪些DOM元素和哪些图形元素层受到影响。这使得浏览器更容易判断何时需要重新绘制。此外，缩小效果区域是性能提升的保证，我通过尝试这两种选项确认了这一点，并注意到使用rgba()代替不透明的网站感觉非常平滑，特别是在Safari和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.
当然，像褪色图像这样的东西不能用rgba()来实现(mask-image没有得到足够的支持)，但是对于简单的透明文本或背景的任务来说，rgba()似乎是一个更好的选择。如果与CSS3动画混合，效果会更好。
Oh, and remember to always include a fallback when using rgba():
噢，记住在使用rgba()时一定要有一个后备选择:
.el {
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 0.5);
}
#2
9
opacity only applies to entire elements, so you cannot apply an alpha channel to a color using the opacity property. You can only do that with the rgba() (or hsla()) function.
不透明度只适用于整个元素，因此不能使用不透明度属性对颜色应用alpha通道。您只能使用rgba()(或hsla())函数。
So rgba()/hsla() is better in all aspects because that's the only way to do it.
rgba()/hsla()在所有方面都更好，因为这是唯一的方法。
#3
1
At first you must know that rgb() is cross-browser, but choosing transparency between rgba() and opacity() depend on your case, if you have a division with DOM tree children and you don't wanna make transparent its children better choose rgba() but if it's a lonely division I prefer use opacity().
首先，您必须知道rgb()是跨浏览器的，但是在rgba()和透明度()之间选择透明度取决于您的情况，如果您有一个与DOM tree子元素的划分，并且您不想让它的子元素透明，最好选择rgba()，但是如果它是一个单独的划分，我更喜欢使用不透明()。
Because browsers use Hardware Acceleration for rendering opacity(). filter: alfa(opacity=x) is same as opacity() but it is for IE8 and earlier versions.
因为浏览器使用硬件加速来渲染不透明度()。过滤器:alfa(不透明度=x)与不透明度()相同，但它适用于IE8和早期版本。
The rgba() is a function that forces browsers to calculate a color, but not using GPU Acceleration, and if you use rgba() frequently in a page maybe your browser work pretty slow. If you use a simple color I prefer use hexadecimal color, because it is a pre calculated color and browsers don't calculate and just paint it.
rgba()是一个迫使浏览器计算颜色的函数，但不使用GPU加速，如果你经常在页面中使用rgba()，你的浏览器可能运行得很慢。如果您使用简单的颜色，我更喜欢使用十六进制颜色，因为它是预先计算的颜色，浏览器不计算，只绘制它。
After all, if your case summon you to use rgba() but you wanna GPU Acceleration, you can use transform: translateZ(0);, nothing happen but your browser force to use GPU. it is a trick for better performance, but don't use it frequently.
毕竟，如果您的案例召唤您使用rgba()，但您想要GPU加速，您可以使用transform: translateZ(0);除了浏览器强制使用GPU之外，什么都没有发生。这是一个提高性能的技巧，但是不要经常使用它。
Note: the transparent key for color maps to rgba(0,0,0,0). it's just a key, not a exact value.
注意:颜色映射到rgba的透明键(0,0,0,0,0)。它只是一个键，不是一个确切的值。