不透明度和通过 alpha 通道 (rgba) 的不透明度有啥区别？

Posted 2023-03-06

【中文标题】不透明度和通过 alpha 通道 (rgba) 的不透明度有啥区别？

【英文标题】：What is the difference between opacity and that through alpha channel (rgba)?不透明度和通过 alpha 通道 (rgba) 的不透明度有什么区别？

【发布时间】：2012-12-24 11:05:14

【问题描述】：

div  background-color: rgb(255,0,0); opacity: 1; 

div  background-color: rgba(255,0,0,1); 

以上两者有什么区别？

【参考方案1】：

Opacity 设置元素及其所有子元素的不透明度值； 而 RGBA 只为单个声明设置不透明度值。

这在这里得到了很好的解释。 http://www.css3.info/introduction-opacity-rgba/

【参考方案2】：

当您使用 alpha 时，您只是为 div 的特定属性设置不透明度。因此，如果您将 alpha 值设置为 0.5，则只有背景会略微透明

但是，当您将不透明度设置为 0.5 时，无论 div 中的元素具有什么 alpha 值，整个 div 和其中的所有内容都将保持略微透明。

在不透明度设置为 0.5 的 div 中，元素的不透明最大为“.5”（当其 alpha 值设置为 1 时）。如果它的 alpha 值设置为 0.5，则透明效果将复合，它实际上将类似于“.25”透明。不确定具体数字。

【参考方案3】：

不透明度： opacity 属性设置元素的不透明度级别。（为元素设置不透明度使整个元素包括其内容都是透明的。）

定义不透明度：

elementopacity:0.5 //makes the element and it's content 50% transparent

opacity-level 描述了透明度级别，其中 1 不是 完全透明，0.5 是 50% 透明，0 是完全透明 透明的。

Alpha 通道 RGBA 颜色值是具有 Alpha 通道的 RGB 颜色值的扩展 - 指定对象的不透明度。 Background : rgba (Red,Green,Blue,Opacity)（设置元素的 rgba 只会使元素背景透明，保持其内容不变。）

定义背景 rgba：背景：

element
   background:rgba(40, 41, 42, 0.5);

一个 RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

要将颜色的十六进制值转换为 rgb：Here

更多信息：

在 IE9+、Firefox 3+、Chrome、Safari 和 Opera 10+ 中支持 RGBA 颜色值。

【参考方案4】：

大多数答案都很好。让我补充一点：

Alpha 通道：指定为 CSS 属性的值。就像在 RGB 颜色的一部分中一样。多次与background-color CSS 属性一起使用。

不透明度：元素的 CSS 属性。影响整个元素及其内容。

来自 MDN（Web 开发的可靠来源之一）的这个示例很好地解释了这一点，并且非常清楚。

https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Make_box_transparent