css - 不透明度和通过 alpha 通道（rgba）的不透明度有什么区别？

Question

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

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

以上两者有什么区别？

score 21 · Accepted Answer

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

score 9 · Accepted Answer

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

定义不透明度：

element{opacity: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：这里

更多信息：

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

score 3 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

这个来自 MDN 的示例（在 Web 开发的可靠来源中）在这里很好地解释了这一点，并使这一点变得非常清楚。

4 回答 4