如何解决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 模式:
- IE 需要借助 iframe 才能遮挡 Flash
- Chrome 仅 div 即可遮挡 Flash
- Firefox 当使用 rgba 的半透明背景色浮层时,无法遮挡 Flash,只有具有背景色(
background-color:#fff
)的元素才能遮挡 Flash,透明背景(background:transparent
),或者背景颜色为半透明(background-color:rgba(255,255,255,0.5)
),或者使用半透明图片(background:url(alpha.png)
)做背景的元素都无法遮挡 Flash - Windows Safari 即使 iframe 也无法遮挡 Flash
- Mac 系统下 wmode 取任何值, div 元素都能轻松遮挡 Flash 元素
参考:
div 浮层遮盖 flash 问题再研究
div层遮盖flash(兼容浏览器)
转载于:https://www.cnblogs.com/GeniusLyzh/p/4651622.html
如何解决div层被flash遮盖的问题相关推荐
- 解决DIV 层被FLASH遮挡了
flash默认是在最高层的(和object如网页播放器,弹出菜单一样),但是flash可以有通过设置放到层的下面. 我是通过设置flash透明来实现的,不过这种方法,有个缺陷,就是flash里的as语 ...
- 让DIV层位于flash对象之上
让DIV层位于flash对象之上 作者:genius 日期:2005-11-15 在公司主页上放了一个浮动广告式的Online Support,是一个浮动层,可是在浮动到Flash上时,就会被Flas ...
- Firefox下div层被Flash遮住的解决方法
1.Flash设置透明,<param name="wmode" value="transparent"> 2.注意<embed中的 wmod ...
- html页面右侧有缝隙,HTML解决div里面img的缝隙问题
图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...
- html 文字浮动flash上,360浏览器让div漂浮在flash上面(div与flash层叠问题)
360浏览器让div漂浮在flash上面解决方法: wmode="Opaque" 最佳推荐 或这个 参考文章: 今天正打算把刚做完的一个网站提交给客户时突然发现网站首页在360浏览 ...
- html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下 本文实例讲述了js实现文本框中输入文字页面中 ...
- 点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- div上下展开收缩 html,js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收 ...
- 【CSS实现Loading遮罩】点击按钮,弹出一个DIV层窗口
加载中 gif 图片: 页面效果: 源码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
最新文章
- angularjs里对JS的lowercase和uppercase的完善
- 选择排序稳定吗_最常见的四种数据结构排序算法你不知道?年末怎么跳槽涨薪...
- boost::units模块实现使用自动前缀的简要示例
- qt5.3.2移植到arm上出undefined reference to '__sync_sub_and_fetch_4的错
- C# WPF:初识布局容器
- scrapy_redis项目配置
- 随想录(scrapy入门)
- gg修改器修改数值没有用怎么办_gg修改器修改游戏数值教程_gg修改器怎么修改数值_3DM手游...
- 计算机论文摘要200字模板,设计论文摘要万能模板_论文摘要万能模板_论文摘要200字模板...
- @Transient注解
- chua系统matlab代码
- python常用模块time模块
- android 百度地图获取两个坐标的实际路线距离
- 求50以内的全部素数
- OA系统,架起企业异地办公的桥梁
- 计算机教师面试专业技能部分,教师招聘考试面试,专业技能测试考什么?全在这了...
- 新的优化目标: energy efficiency
- 基于WEB的网上购物系统的设计与实现|电商购物商城
- c++设计地铁售票系统_地铁售票系统设计思想及部分代码
- 写手们要下岗了?百度开启AI智能写作平台
热门文章
- Redis 开发陷阱及避坑指南!
- 首次公开:京东数科强一致、高性能分布式事务中间件 JDTX
- 【手写系列】写出我的第一个框架:迷你版Spring MVC
- Java线程详解(11)-线程池
- STL:priority_queue
- 【Python】青少年蓝桥杯_每日一题_6.27_输出符合要求的10个自然数
- 计算机里面的百度云怎么弄消失,我换了个手机登录我的百度网盘,里面存的东西都不见了,谁能告诉我怎么弄回来么...
- 15天内数据迁移!广东省能源局发布通知,这类数据中心面临停工风险!
- 数据机房局部过热与节能降耗解决方案
- 民生银行马坡数据中心基础设施Uptime Mamp;O运营管理体系建立与实施