HTML元素遮挡Flash之梦
wmode参数: transparent模式:可用z-index控制层级 opaque模式:可用z-index控制层级 window模式:flash层级在浏览器核心显示窗口之上,flash会盖住与他重合的html
情景1(可修改flash的wmode参数)
修改wmode属性为,transparent或opaque
DEMO如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML元素遮挡Flash之梦 - 情景1 </title>
<style>
html, body, object, embed{ padding: 0; margin: 0; }
.m-box { position: relative; } .m-flash, .m-flash embed { width: 400px; }
.m-shadow { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: #ccc; }
</style>
</head>
<body>
<!--transparent-->
<div class="m-box">
<object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="http://www.w3school.com.cn/i/bookmark.swf">
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>
</object> <div class="m-shadow">
Jununx,欢迎您!--transparent
</div>
</div> <!--opaque-->
<div class="m-box">
<object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="http://www.w3school.com.cn/i/bookmark.swf">
<param name="wmode" value="opaque"/>
<embed wmode="opaque" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>
</object> <div class="m-shadow">
Jununx,欢迎您!--opaque
</div>
</div> </body>
</html>
情景2(不可修改flash的wmode参数)-- flash和你的iframe遮挡层在同一个页面
注:如果要兼容Safari、Opera,那么请直接告诉需求这个遮不了
DEMO如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML元素遮挡Flash之梦 - 情景2 </title>
<style>
html, body, object, embed{ padding: 0; margin: 0; }
.m-box { position: relative; } .m-flash, .m-flash embed { width: 400px; }
.m-flash { position: relative; z-index: 1; }
.m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }
.m-shadow-txt { position: absolute; z-index: 2; }
.m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }
</style>
</head>
<body>
<!--window-->
<div class="m-box">
<object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="http://www.w3school.com.cn/i/bookmark.swf">
<param name="wmode" value="window"/>
<embed wmode="window" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>
</object> <div class="m-shadow">
<div class="m-shadow-txt">Jununx,欢迎您!--window</div>
<iframe class="m-shadow-ifr" frameborder="0"></iframe>
</div>
</div> </body>
</html>
情景3(不可修改flash的wmode参数)-- flash是被一个iframe页面引入的
注:如果木有权限操作iframe页面,那么请直接告诉需求这个遮不了 注:如果要兼容Safari、Opera,那么请直接告诉需求这个遮不了
DEMO页:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML元素遮挡Flash之梦 - 情景2 </title>
<style>
html, body, object, embed{ padding: 0; margin: 0; }
.m-box { position: relative; } .m-flash { position: relative; width: 400px; height: 400px; z-index: 1; }
.m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }
.m-shadow-txt { position: absolute; z-index: 2; }
.m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }
</style>
</head>
<body>
<!--window-->
<div class="m-box">
<iframe class="m-flash" src="ifr.html" frameborder="0"></iframe> <div class="m-shadow">
<div class="m-shadow-txt">Jununx,欢迎您!--window</div>
<iframe class="m-shadow-ifr" frameborder="0"></iframe>
</div>
</div> </body>
</html>
iframe页:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML元素遮挡Flash之梦 - 情景3 </title>
<style>
html, body, object, embed{ padding: 0; margin: 0; }
.ifr { position: absolute; z-index: 2; width: 100px; height: 100px; opacity: 0; filter: alpha(opacity=0); }
.m-flash { position: absolute; z-index: 1; width: 400px; }
</style>
</head>
<body>
<!--window-->
<object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="http://www.w3school.com.cn/i/bookmark.swf">
<param name="wmode" value="window"/>
<embed wmode="window" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>
</object> <iframe class="ifr" frameborder="0"></iframe>
</body>
</html>
HTML元素遮挡Flash之梦的更多相关文章
- 防止fixed元素遮挡其他元素的方法
有多个页面,有的有固定的头部(设置了postion:fixed的元素),有的没有固定的头部,这时就有个问题,有固定头部的页面,头部会遮挡下面的内容,那怎么解决呢? <!DOCTYPE html& ...
- 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异
标准参考 OBJECT 元素定义了一个嵌入的对象.其引入的初衷是取代 IMG 和 APPLET 元素.不过由于安全等各方面原因以及缺乏浏览器支持,这一初衷并未实现.浏览器的对象支持依赖于对象类型.然而 ...
- IE下object元素遮挡div表单
目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...
- CSS 解决z-index上层元素遮挡下层元素点击事件问题
解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 需求 ...
- espresso 元素遮挡问题。
在使用espresso进行测试的时候,点击一个横向列表的时候会在点击的项目下出现对应的横线. 实现方式是在FrameLayout下放两个TextView, 一个TextView包含下划线,默认是Fra ...
- ie6绝对定位的块会被select元素遮挡的解决方案
RT(已无力吐槽ie),解决方法是:定义一个iframe,与想要显示的绝对定位的块设置为同一大小.放在同一个位置上.我的网页里绝对定位的元素是会随着鼠标移动显示和隐藏的,于是这个frame也要跟着显示 ...
- 网页中插入FLASH(swf文件),并且让Flash不遮挡HTML元素
一:网页中插入flash代码如下: 当然里面的很多属性可以去掉,根据具体的需求而定. 我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...
- 子元素z-index高于父元素兄弟元素z-index被遮挡问题
问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...
- 网页中创建音频、视频和Flash等多媒体:object元素
<object>元素:它主要用于定义网页中的多媒体,比如音频.视频.Java applets.PDF.ActiveX和Flash.Object标签是成对出现的,在object标签内可以使用 ...
随机推荐
- linux2.6.32 内核源码树解析与整理
一 系统最核心组件目录: 1 arch目录该目录中的每个子目录中都与某种体系结构相对应,用于存放体系结构相关代码,向平台无关的系统核心模块提供所需的功能接口.每个体系结构对应的子目录下通常至少包含以下 ...
- C#中out的一种用法
1.当希望方法返回多个值时,声明out 方法很有用. 这样使方法可以有选择地返回值. using System; using System.Collections.Generic; using Sys ...
- 周末献礼 MyVoix2.0.js 麦克风波形绘制(一)
最近更新了之前发布的语音识别框架MyVoix,加入了麦克风的波形分析效果.没有看过MyVoix介绍的同学请猛戳(传送门) Github地址 在新的更新中,波形分析可以绑定麦克风源,也可以单独配合别的音 ...
- 转 Jona Dany 一个20年架构师程序员的经验总结
1.估算问题解决所需要的时间,为自己定一个时间限制,1小时,30分钟,15分钟.如果这期间不能解决问题,那就去寻求帮助.不要做超级堆码员. 2.编程语言是一种语言,只是一种语言.只要理解一种语言的原理 ...
- [LeetCode 120] - 三角形(Triangle)
问题 给出一个三角形,找出从顶部至底部的最小路径和.每一步你只能移动到下一行的邻接数字. 例如,给出如下三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] 从顶部至底部的最 ...
- Android中的SQLiteOpenHelper类
SQLiteOpenHelper是Android提供的一个管理数据库的工具类,可用于管理数据库的创建和版本更新.一般的用法是创建SQLiteOpenHelper的子类,并扩张它的onCreate(SQ ...
- Why SignalR does not use WebSockets?
Why SignalR does not use WebSockets? As you probably know SignalR supports multiple transports. Th ...
- live555的编译及使用
live555是个流媒体C++开源库,VLC的Meida Player就使用了它的API完成的RTSP客户端,由于VLC的SDK没有提供相关record流到视频文件的API,所以我想用过live555 ...
- Delphi default属性
Delphi default属性 Delphi控件指定属性的时候可以加上Default关键字,例如property Color default clBtnface.一直以为这个是构造类的时候的默认值, ...
- Android读取Assert文件夹下txt文本并变为String的方法
使用场景,在assert文件夹下 有些文本文件,我们需要通过工具类读取出来,然后放到String字符串中,我们该如何操作呢: 直接上代码: 使用方法: MyActivity.readAssertRes ...