Mozilla 不透明度：0 不起作用答案

【问题标题】：Mozilla opacity: 0 is not workingMozilla 不透明度：0 不起作用
【发布时间】：2013-10-11 18:02:47
【问题描述】：

我正在寻找解决方案，但找不到任何地方。我有块，下面还有其他块。第一个块的样式为“不透明度：0”。所以他在另一个块的顶部，并且在那个块（不透明度为 0）中几乎没有元素。问题就在那里，mozilla opacity: 0 accepting as display: none 我不知道为什么会这样。

有什么解决办法吗？

【问题讨论】：

您预计会发生什么？你看不到完全透明的东西。
是的，但我可以推动元素（在带有黑色边框的块上）。不透明度应该使带有红色边框的块不可见，根本不隐藏它

标签： html opacity mozilla

【解决方案1】：

如果将父级的不透明度设置为 0，那么他的所有元素都将被隐藏。也许告诉我们您想要做什么，我们会尝试找到一个更好的想法来满足这些条件。

【讨论】：

问题是我可以推送块下的元素（带有红色边框）。那不应该工作
@baitas212123 你的意思是后面的div消失了吗？
不，当我将他的不透明度设置为 0 时，带有红色边框的 div 在 mozilla 中完全消失了。不是隐形，而是完全消失
@baitas212123 好的。所以你说它只发生在Mozilla中。将您的代码上传到jsFiddle 请看看发生了什么。
当然，用mozilla和chrome打开这个，你会看到不一样的jsfiddle.net/5zWZe/1

【解决方案2】：

首先，您的JSFiddle - jsfiddle.net/5zWZe/1/ 不使用不透明度。所以这个例子似乎与你的问题无关。

有关按钮被 div 覆盖的示例，请参阅JSFiddle - jsfiddle.net/X7S3w/2/。如您所见，即使您将不透明度降低到 0，也无法通过 div 访问该按钮。另请注意，在 Firefox 或 Chromium 中的行为是相同的。

看来，您有一个 iframe 和 flash 视频的特殊情况。请参阅具有相同 CSS 的其他 JSFiddle - jsfiddle.net/X7S3w/3/，但按钮已替换为 iframe。尽管 div 位于 iframe 上方，但此处可以访问 flash 视频。但同样，Firefox 和 Chromium 中的行为相同。

当您修改 youtube URL 的查询字符串并附加 ?wmode=transparent 时，使用 div 覆盖 iframe/flash 视频似乎有效

<iframe id="without" src="http://www.youtube.com/embed/5f-n3-pV81A?wmode=transparent"></iframe>
<div id="opacity">opacity</div>

请参阅此JSFiddle - jsfiddle.net/X7S3w/4/ 以获取工作示例。现在 div 成功阻止了 flash 视频。同样，这在 Firefox 和 Chromium 中同样有效。

所以看起来这更像是一个 Flash 问题，而不是一些 CSS 不透明行为。

【讨论】：

看第一个答案的cmets