如何解决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(兼容浏览器)

时间: 2024-10-07 02:16:03

如何解决div层被flash遮盖的问题的相关文章

IE和Firefox下flash挡住div层的问题解决方法

1 <object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="80"> 3 <param name="movie" value="flash地址" /> 4 <param name=&qu

如何让Div层悬浮在Flash Object对象之上?

如果想让某个图片或者Div层悬浮在别的对象之上,一般的方法是用CSS的z-index来定义.z-index的数值越大,对象越在上面. 但面对flash object对象,z-index无论调多大,你的对象总是在object下面. 这时你需要在Object的<object>...</object>标签内部加入一个参数 <param name="wmode" value="transparent"> ,具体含意为object的透明模式

实现DIV层内的文字垂直居中

有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法. 首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释: " This property affects the vertical positioning inside a line box of the boxes

实现DIV层内的文字垂直居中(转)

有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法. 首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释: “ This property affects the vertical positioning inside a line box of the boxes 

如何在一堆框架(Frame)上弹出div层【转载】

框架Frame,不知道现在还有多少人会用,至少我学用html到现在,只是知道有这种东西存在,却没见到也没用到过.上周终于碰到个机会让我一窥框架是个啥东西,然后由于项目的需要,我得做个div层置于所有的框架之上,做成下拉菜单的效果.折腾了一下,就记在这里吧. 第一个DEMO展示的是框架,点击这里查看. 用框架来布局这种后台管理类的界面,结构上非常清晰,维护上也应该比较方便,因为每个框架里展示的页面是独立的.但是在一堆frameset和frame上要浮动起一个div层来,我试了一下,基本上行不通.当

CSS 如何使DIV层水平居中

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实验得出以下结论: 正确的也是对页面构造没有影响的设置如下: 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找

IE6下div层被select控件遮住的问题解决方法

Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但它使弹出的div能浮于select等一些元素之上,因此完美解决了此问题,如下是需要弹出的Div代码,星号内代码为添加的iframe: <div id="quest"> <!--*******************************iframe***********

CSS设置div层充满整个网页

div的100%是从其上一级div的宽高继承来的,要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效. 前面总得有个容器说明他的高度是多少.这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度,而不是100%. 解决方法:只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果. 1 html, body{

JavaScript学习之DIV层与图像

DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距离. 绝对定位有两个属性:left和top,分别是距离网页左边和网页顶部的绝对位置,可借助style属性直接设置: style="position:absolute;left:距离左边距离;top:距离顶部距离" (2)相对定位(relative):需要有一个参照元素,设置好相对位置和参照