如何将HTML内容放置在Flash动画上方？

Question

我正在处理的一个网站有 Flash 标头（使用 swfobject 嵌入它们）。现在我需要编写一些 HTML 代码，它应该重叠在 Flash 动画上面。

我尝试在 Flash 元素的容器和（绝对定位的）div 上设置 z-index，但它仍然会“消失”在 Flash 动画后面。

我希望能找到一个 CSS 解决方案，但如果有一点 JS 魔法可以解决问题，我也可以尝试。

更新：谢谢，将 wmode 设置为“transparent”大部分解决了问题。只有 Safari/Mac 在第一次显示时仍然会将 div 隐藏在 Flash 后面。当我切换到另一个应用程序并返回时，它才会在前面。我能够通过将 div 的初始样式设置为 display:none; 并在页面加载后半秒钟后通过 JS 显示它来解决这个问题。

- _Lasar

---

你能否提供一个能够正常工作的样例呢，因为我也遇到了同样的问题，但是无法解决。看一下是否是我的问题还是浏览器的问题会很好。 - Svante Svenson

Answer 1

请确保FlashVar "wmode"设置为"transparent"或"opaque"，但不是默认的"windowed"。这样，您就可以使用CSS z-index属性。

- Steve Paulo

---

wmode就像被埋在南美最深的丛林中的黄金偶像一样。我还记得第一次听说它的时候，我简直欣喜若狂。 - matt lohkamp

请记住，除了Flash 10的beta版本和非常新的浏览器（Fx 3.0.0+，Opera 9.50+，其他浏览器不确定），它不适用于Linux浏览器。 - Michael Johnson

有多少Linux用户没有及时更新他们的浏览器和相关程序？这是一个按定义精明的人群。 - Steve Paulo

一些相当大的Linux用户子集出于原则而运行Flash / SWF杀死浏览器插件，因此在开发时我不会过于担心他们。 </semisnark> - defmeta

这些模式之间的区别：https://dev59.com/7HNA5IYBdhLWcg3wn_bD - JDandChips

Answer 2

跟进说明：正如您在更新中发现的那样，让HTML显示在Flash之上目前是一个棘手的问题，即使使用您找到的JS魔法，您也应该预期Flash会阻挡某些使用非主流浏览器、旧版本等的观众看到您的HTML。

如果对您来说重要的是吸引任意数量的浏览者（例如移动设备），那么重新设计内容以避免重叠可能会在长远节省您的头疼。

- fenomas

---

当然，你是正确的。在这种情况下，客户并不关心，但总的来说这是一个好建议。 - Lasar

在这种情况下，另一个问题是有多少移动设备支持Flash？iPhone，我确定，可能是一些Windows Mobile智能手机，但之后呢？（而且，我对移动Web开发不是很熟悉，所以我真的不知道...） - Steve Paulo

史蒂夫：撤回，反转！大多数现代智能手机都支持Flash，但iPhone不支持。具体而言，大多数现代手机（即那些拥有Web浏览器的手机）都有Flash Lite，通常是2.x或3.x版本。Flash Lite 2.x与Flash 6大致相似，而Lite 3.x类似于Flash 8。 - fenomas

Answer 3

我想补充一点，你必须记住在 OBJECT 和 EMBED 标记中设置 WMODE 参数为 ("transparent")！

点击链接查看详细信息： http://kb2.adobe.com/cps/142/tn_14201.html

- Nassim Chikh

Answer 4

使用以下样式的代码，在Firefox和Chrome中可以正常工作

<object id='myId'  width='700' height='500'>
            <param name='movie' value='images/ann/$imagename' />
            <param name='wmode' value='transparent' />
            <!--[if !IE]>-->
            <object type='application/x-shockwave-flash' data='images/ann/$imagename' width='700' height='500' wmode='transparent'>
            <!--<![endif]-->
            <div>
                <h1>Please download flash player</h1>
                <p><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a></p>
            </div>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>

- Khadka Pushpendra

Answer 5

就像Steve Paulo所说的那样，当覆盖在Flash上方的HTML调用更多Flash时，好玩的部分就来了...

我们玩得很开心，这其中涉及将z-index设置为实际更低，以解决Flash自认为是最棒的，因此必须始终处于顶部的问题。

- Steve Perks

Answer 6

要设置这个闪存变量，可以这样做

s1.addParam("wmode","transparent");

然后在 div 标签中使用这个样式

style="z-index:inherit; 

问题将会得到解决。

- amit