如何解决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"> ...
最新文章
- JAVA学习资源网站
- 丑憨批的Transformer笔记
- 教你如何在Android 6.0上创建系统悬浮窗
- 01-hibernate注解:类级别注解,@Entity,@Table,@Embeddable
- 鼠标点击时隐藏java代码,js实现点击展开隐藏效果(实例代码)
- php yaf.dll,windows下配置nginx+php+yaf的环境
- php面试专题---MySQL常用SQL语句优化
- 使用自定义端口连接SQL Server 的方法
- 京东面试撞上重感冒(纯粹面试之感)。。。。。。
- Atitit office ooxml 系列 excel的读取api 框架 poi的使用
- 怎样知道android的手机号码,怎么知道自己的手机号
- 编译原理考试知识点总结
- Qt调用工业相机之海康威视相机
- java开发面试流程
- 浩顺 HS-320 打印机驱动
- 9.6.5对象的常引用
- 如何将分表汇总到总表_如何快速将几个分表合并到一张表
- 显示隐藏文件 for Mac
- java-php-python-springboot网上摄影工作室计算机毕业设计
- C#怎么判断是鼠标左键单击还是右键单击?
热门文章
- java Gson转map与map转gson
- 基于 Spring Boot 的 Restful 风格实现增删改查
- 基于Spring boot 2.1 使用redisson实现分布式锁
- flowable设置流程发起人
- Go: GoRoutine是如何实现的?
- 解决Error: Cannot find module 'node-sass'问题
- function $(id) {}表示什么函数
- 2019中国大学生程序设计竞赛(CCPC)-网络选拔赛-第七题Shuffle Card
- 正在CPU上运行的进程_进程的概念,系统资源分配的单元
- java五子棋以当前空位为中心 取9个点_java 五子棋有点问题,哪位帮忙破一下、、...