为什么子元素不能覆盖其父元素的不透明度，即使子元素的值较大？

Question

为什么子元素不能覆盖其父元素的不透明度，即使子元素的值较大？

41

众所周知，子元素目前无法覆盖其父元素的opacity属性。父元素的opacity属性总是生效。

当子元素试图降低（使用较小的值覆盖）其父元素的不透明度时，这是有道理的。但是，如果子元素试图使用更大的值来覆盖它，怎么办？难道不能允许吗？为什么一个半透明的父元素不能有一个不透明的子元素？有人能分享一下为什么CSS设计中要决定这样限制的想法吗？

如果有人能够阐明理论原因，我将不胜感激。我实际上正在尝试找出其中的原因（而不是解决方法，因为这些已经被讨论了很多次）。我相信这是许多像我这样的新手程序员想知道的事情。

- techfoobar

17

有一种方法可以实现这个目标：在父元素中使用半透明背景（例如 background-color:rgba(0, 0, 0, 0.5);），其中父元素的背景是一个 rgba 颜色，具有 alpha 通道。 - JCOC611

2

是的，我知道。如果我在父元素和子元素中使用background-image怎么办？此外，实际上我并不是在寻找解决方法。我想了解为什么CSS会做出这样的设计决策。 - techfoobar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bfavaretto · Accepted Answer

我从未将其视为“覆盖”或“下降”。这是相对不透明度的问题。如果父元素的不透明度为0.5，则子元素也具有相同的不透明度（相对于父级堆叠上下文）。子元素可以具有介于0和1之间的自己的不透明度值，但它始终相对于父级不透明度。因此，如果子元素还设置了“opacity: 0.5”，则它将是某些具有不透明度为1的父级兄弟的不透明度的0.25。 spec 将其视为 alpha 蒙版，其中只能删除不透明度。元素要么不透明，要么具有一定程度的透明度（任何小于 1 的东西）：

不透明度可以被看作是后处理操作。在概念上，在元素（包括其后代）呈现为 RGBA 离屏图像之后，不透明度设置指定如何将离屏呈现与当前复合呈现混合。

稍后：

如果对象是容器元素，则效果就像将容器元素的内容使用掩码与当前背景混合，其中掩码的每个像素值为<alphavalue>。

至于为什么要这样实现，我认为这不是有意为之的。可能选择这种方法是因为计算更简单，只有在实际需要不同的东西时才会意识到（然后引入了rgba color和background-color - 我可能在时间轴上有所错误）。