使用wmode="direct"在SWF对象上覆盖HTML元素

Question

我一直在搜索如何将HTML元素层叠在SWF对象上，最终根据Abode的说法得出以下结论：

Internet Explorer：完全不支持层叠。

Firefox：不支持层叠（但它可以工作，但没有透明度）。

Chrome：Adobe声称不支持，但令人惊讶的是它能很好地工作并具有透明度。

Safari（Windows）：完全不支持层叠。

safari（Mac OS）：支持。

我知道我可以轻松设置wmode="transparent"或wmode="opaque"，并且层叠将正常工作。但我发现对于包含3D内容的SWF对象，其wmode必须设置为"direct"或"gpu"。

如果有人知道这个问题的解决方案，我会非常感激，因为我正在开发一个Flash游戏，我想将它与HTML元素叠加在一起，但我没有找到任何确定的答案是否可能。提前致谢。

- user1327487

Answer 1

经过几次尝试，我在Firefox和IE上找到了一个解决方案。这种方法有点“脏”，但在某些情况下有效。

在swf上方显示一个iFrame，因此您可以在iFrame中添加分层的HTML。

您还可以将iFrame设置为背景，只需保持空间清晰即可放置即将到来的HTML。

HTML：

<div class="box">
<iframe src="emptyframe.html" frameborder="0" class="emptyiframe"></iframe>
<div class="content">
Shown on top
</div>
</div>

CSS：

.box { position: absolute; z-index: 100; background: #fff;}
.emptyiframe { position: absolute; width: 100%; height: 100%; border: none; z-index: -1;     }

通过此解决方案，即使wmode =“direct”，也可以在flash上方添加元素。但是需要注意，iframe在html的后台处于flash的顶部，因此您无法进行任何透明度的设置。

- mikael