embed插入的Flash总在最前面遮住其他元素,设置z-index属性也无效的解决办法

修行者 网站建设 2616浏览 3评论

因为新主题的顶部导航是固定在最前面的,然后发现文章里用embed方式插入的Flash元素(优酷视频什么的)总能把顶部导航遮住,把导航元素的z-index 属性修改成再大也无效,也就是说这个Flash能盖住所有其他元素,并总是在页面最前面显示,这个虽然不影响整体但对用户体验不太好。

网上查了下然后找到了解决方案,就是在插入flash的embed标签中加入“wmode”属性并设置为wmode=“transparent”或“opaque”。

关于wmode属性就是window mode(wmode)即窗口模式总共有3种:

window 模式

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

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。

Opaque 模式

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

Transparent 模式

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

最后推荐使用wmode="opaque" 因为wmode="transparent"会影响flash的性能,如果object标签遇到此问题也是同样的解决方法。。

修行者

本文地址http://xxzh.org/web/embed-flash-z-index.html

版权说明:如非注明,本站文章均为 修行者博客 原创,转载请注明出处和附带本文链接。

已有3位小伙伴发表了看法
  1. 特惠吧

    特惠吧游客 回复Ta 写得好,大赞!!!

  2. 贝蒂斯橄榄油批发

    贝蒂斯橄榄油批发游客 回复Ta 围观下~很不错的博客哦!

  3. 烟台阿里巴巴

    烟台阿里巴巴游客 回复Ta 强势围观

发表评论(友情提示:可直接按Ctrl+Enter提交评论)
来宾的头像
访客