5

当一个元素被赋予 时opacity，该元素的所有静态和相对子元素都以部分透明度呈现。但是，带有position: absolute(or position: fixed) 的元素不会继承这一点，而是以完全不透明的方式呈现，除非另有明确说明。

现在，我可以style.opacity通过调用执行分配的函数来替换分配，然后循环遍历所有子项，获取他们的计算样式并查看他们的位置属性是否需要添加自己的style.opacity......但这有点像核弹.

我也知道我可以添加opacity: inherit到适当的元素中，但这仅在它们是褪色元素的直接子元素时才有效 - 如果它们是后代怎么办？

我想知道是否有办法强制元素继承正确的透明度。

旁注：filter:alpha(...)有趣的是，当我使用 IE 时，IE 会执行我想要的方式。

4

2 回答 2

8

事实证明，答案只是“确保绝对元素具有受透明度影响的相对容器”。我忘了。

于 2012-07-28T13:39:59.230 回答
0

根据评论，它似乎确实是 IE 唯一的问题。这似乎也是您需要解决的错误。但是仅在定位元素上设置...

opacity: inherit; /* IE9 */
filter: inherit; /* IE8 */

...在 IE8-9中确实会传播给absolute继承的元素的子元素opacity，假设这些子元素本身没有position设置（即使position: relative对于 IE8也是如此；但是，IE9 中的后续实验表明，元素的孙子absolute元素在其自身时似乎保持隐藏状态也是position: absolute）。任何其他定位的孩子都需要同样的。IE7（如果你在乎的话）晚上inherit在filter.

IE9 可以通过position: relative设置为#container没有任何inherit设置 on来解决#contained，但这可能会严重影响您对absolute孩子的定位（尽管不是孩子fixed）。

如果您正在处理 中的许多定位元素，那么我建议有条件地 将此代码提供给 IE9 及以下（我没有测试 IE10）。

#container * {
    opacity: 0;
    filter: alpha(opacity=0);    
}
于 2012-07-23T17:42:00.613 回答