为什么这个 div 继承其父级的不透明度？答案

【问题标题】：Why is this div inheriting its parent's opacity?为什么这个 div 继承其父级的不透明度？
【发布时间】：2012-05-31 12:11:41
【问题描述】：

通常我会尝试在此处足够好地记录问题，并复制一些代码，以便当我链接到的用于演示问题的 URL 不再指向任何地方时，至少问题中会有足够的代码，所以稍后阅读这篇文章的人可能有同样的问题可以看到这个例子。但是在这种情况下，我遇到的问题非常具体......我不知道出了什么问题，所以我不知道在这里复制什么代码。

我有一个不透明度设置为 1 的 div，在另一个不透明度设置为 0.5 的 div 中，以制作非常便宜的“灯箱”效果。我至少在其他两个站点上以完全相同的方式完成了这一完全相同的事情，并且从未遇到过这个问题。事实上，如果我在 Dreamweaver 中打开一个新的 HTML 页面并尝试复制该问题，我就做不到。我知道我一定忽略了一些如此简单得可笑的事情，但是......

有问题的违规网址是http://pmind.com/staging/123/dashboard.shtml

中间的白框generate_window 正在继承其父级 (generate_window-wash) 的不透明度。

为什么？

【问题讨论】：

另外，由于某些原因，用星号包围这些 div 名称并没有使它们变成斜体。
sitepoint 上有一个关于此问题的冗长帖子，其中包括一些潜在的解决方案：sitepoint.com/forums/showthread.php?t=702633

标签： css z-index opacity

【解决方案1】：

父<div>，包括它里面的所有东西，是透明的。

透明元素中不能有不透明元素。

相反，您可以将不透明的<div> 放置在透明的上方，而不是孩子。

【讨论】：

也许同时举办的朋友聚会之夜最终对我的大脑造成了影响。我一直在查看我之前完成的工作，并在想，“实际上没有区别！”
当然，除了在其他时候，我立即关闭了wash div，而不是在其中嵌套任何东西。
损失也可能是心理上的，因为你所有的朋友都突然离开了你。 ;)

【解决方案2】：

具有不透明度的元素的所有子节点都继承该不透明度。这是设计使然。

您需要重新排列您的 HTML，以便该项目不是子项而是占据相同的位置。

【讨论】：

【解决方案3】：

它不是从它的父母那里继承的。我在萤火虫中看到它显示了以下属性：

#generate_window {
background:none repeat scroll 0 0 #FFFFFF;
height:400px;
margin:200px auto;
opacity:1;
position:relative;
width:500px;
z-index:2000;
}

【讨论】：

@opacity 0.5 已被覆盖......并被删除，我在萤火虫中看到了同样的情况。