你的位置:首页 > 网页设计

[网页设计]如何解决div层被flash遮盖的问题


 页面构建中的Flash层会遮挡Div的问题,一般通过设置wmode="transparent" 或wmode="window"就可以解决。不过对于Flash视频这个貌似不太凑效。

对于Flash遮挡的问题,首先来了解一些wmode的一些属性值。

 

wmode的5种取值

Window模式

默认情况下的显示模式,在这种模式下 flash player 有自己的窗口句柄,这就意味着 flash 影片是存在于 Windows 中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以 flash 只是貌似显示在浏览器中,但这也是 flash 最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮住位置与他重合的所有 HTML 层。

Opaque模式

这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用 z-index 值来控制 HTML 元素是遮盖 flash 或者被遮盖。

Transparent模式

透明模式,在这种模式下 flash player 会将 stage 的背景色 alpha 值降为 0 并且只会绘制 stage 上真实可见的对象,同样你也可以使用 z-index 来控制 flash 影片的层级值,但是与 Opaque 模式不同的是这样做会降低 flash 影片的回放效果,而且在 9.0.115 之前的 flash player 版本设置 wmode="opaque""transparent" 会导致全屏模式失效。

Direct模式

直接渲染模式,在该模式下,flash player 可以通过硬件直接对画面进行合成,并呈现在屏幕上。使用这种模式能够得到比 window 模式更好的渲染效果,特别是在视频播放方面,如果页面的 flash 需要使用了 stagevideo 或者 stage3D,那么必须使用这种模式。它有比 window 模式更好的渲染,但也有 window 模式下的所有缺点。

GPU模式

在一些网络电视和移动设备上可以启用额外的硬件加速,与其他 wmode 值模式相比,显示序列的像素保真度无法保证,其他方面跟 direct 模式相似。 

div遮盖Flash层测试结论

1.使用 opaque/transparent 模式,只需 div 就可以遮挡住 Flash,对于Flash视频,IE中的div层需要嵌套iframe标签才可以遮挡;

2.使用 window/direct/gpu 模式:

  1. IE 需要借助 iframe 才能遮挡 Flash
  2. Chrome 仅 div 即可遮挡 Flash
  3. Firefox 当使用 rgba 的半透明背景色浮层时,无法遮挡 Flash,只有具有背景色(background-color:#fff)的元素才能遮挡 Flash,透明背景(background:transparent),或者背景颜色为半透明(background-color:rgba(255,255,255,0.5)),或者使用半透明图片(background:url(alpha.png))做背景的元素都无法遮挡 Flash 
  4. Windows Safari 即使 iframe 也无法遮挡 Flash
  5. Mac 系统下 wmode 取任何值, div 元素都能轻松遮挡 Flash 元素

参考:

div 浮层遮盖 flash 问题再研究

div层遮盖flash(兼容浏览器)