40

众所周知，子元素目前还不能覆盖opacity其父元素的属性。parent的opacity属性始终生效。

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

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

4

1 回答 1

47

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

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

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

后来：

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

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

于 2012-09-27T02:31:47.203 回答