使用 wmode="direct" 在 SWF 对象上分层 HTML 元素

Posted 2023-03-13

【中文标题】使用 wmode="direct" 在 SWF 对象上分层 HTML 元素

【英文标题】：Layering HTML element over SWF object with wmode="direct"

【发布时间】：2012-11-27 21:00:08

【问题描述】：

我一直在寻找关于如何在 SWF 对象上分层 html 元素的问题，最后我想到的是（根据Abode）：-

Internet Explorer：根本不支持分层。

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

Chrome：Adobe 声称它不受支持，但令人惊讶的是它运行良好且具有透明度。

Safari(Windows)：根本不支持分层。

safari(Mac OS)：支持。

我知道我可以很容易地设置 wmode="transparent" 或 wmode="opaque" 分层就可以了。但我发现对于包含 3D 内容的 SWF 对象，它的 wmode 必须设置为“direct”或“gpu”。

如果有人知道此问题的任何解决方案，我将不胜感激，因为我正在 Flash 上开发游戏，我想用 html 元素覆盖它，但无论是否可能，我都没有找到任何明确的答案

提前致谢

【参考方案1】：

经过几次尝试，我得到了一个适用于 Firefox 和 IE 的解决方案。 这有点脏，但在某些情况下有效。

一个 iFrame 显示在 swf 的顶部，因此您可以在 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"，也可以在闪存上添加元素。但是你需要记住，iframe是在flash之上的html的背景中，所以你不能做任何透明。