为什么子元素不能用更大的值覆盖父元素的不透明度？

Question

我们知道，子元素目前不能覆盖其父元素的opacity 属性。父级的opacity 属性始终生效。

当孩子试图覆盖（用较小的值覆盖）父母的不透明度时，这是有道理的。但是如果孩子试图用更大的价值覆盖它呢？这不应该被允许吗？为什么半透明的父母不能有一个不透明的孩子？谁能分享一下为什么决定将这种限制作为 CSS 设计的一部分？

如果有人能阐明其理论原因，我将不胜感激。我本质上是在试图找出其中的原因（不是解决方法；因为这些已经被讨论过很多次了）。我相信这是很多像我这样的新手都想知道的。

Answer 1

我从未将其视为“压倒一切”或“压倒一切”。这是相对不透明度的问题。如果父级的不透明度为0.5，则子级也有（与父级的堆叠上下文相关）。子级可以在0 和1 之间有自己的不透明度值，但它始终与父级的不透明度相关。因此，如果孩子也设置了opacity: 0.5，它将是0.25 的不透明度与不透明度1 的父母的一些兄弟姐妹的不透明度。

spec 将其视为 alpha 蒙版，其中的不透明度只能被移除。一个元素要么是不透明的，要么具有一定程度的透明度（任何东西< 1）：

不透明度可以被认为是一种后处理操作。从概念上讲，在将元素（包括其后代）渲染为 RGBA 离屏图像后，opacity 设置指定如何将离屏渲染混合到当前的合成渲染中。

及以后：

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

至于为什么它是这样实现的，我不认为这是“让我们禁止那个”意义上的故意。也许选择这种方法是为了计算更简单，直到后来才认识到实际需要不同的东西（然后引入了 rgba color 和 background-color ——我可能对这里的时间线有误）。