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

Posted 2023-03-06

【中文标题】为啥子元素不能用更大的值覆盖父元素的不透明度？

【英文标题】：Why can't child elements override the opacity of parent with a greater value?为什么子元素不能用更大的值覆盖父元素的不透明度？

【发布时间】：2012-09-18 18:08:02

【问题描述】：

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

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

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

【问题讨论】：

有一种方法可以实现这一点：在父级中使用半透明背景（例如background-color:rgba(0, 0, 0, 0.5);，其中父级的背景是rgba 颜色，它有一个alpha 通道。跨度>

是的，我知道。如果我在父元素和子元素中使用背景图像怎么办？此外，我实际上并没有寻找解决方法。我希望了解为什么在 CSS 中做出这样的设计决定。

【参考方案1】：

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

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

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

及以后：

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

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

【讨论】：

是的，那部分很清楚。 0.5 的不透明度超过 0.5 的不透明度就像 0.25。但是，我仍然疑惑的是，为什么半透明的父母不能有完全不透明的孩子？为什么不按设计？

因为孩子是父母的一部分，他们的不透明度是内在的。

这意味着如果我们将孩子的不透明度指定为 2.0，我们可以在 0.5 不透明的父母之上拥有一个不透明的孩子——但这不会发生，不是吗？我相信有更多的理由不允许这样做。

用可能的原因更新了我的答案。

可以使用 rgba 颜色模式来处理这种效果。例如这有效： .parentbackground: rgba(background: 255, 255, 255, 0.7); .parent .childbackground: rgba(255, 255, 255,1);