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之梦的更多相关文章

  1. 防止fixed元素遮挡其他元素的方法

    有多个页面,有的有固定的头部(设置了postion:fixed的元素),有的没有固定的头部,这时就有个问题,有固定头部的页面,头部会遮挡下面的内容,那怎么解决呢? <!DOCTYPE html& ...

  2. 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异

    标准参考 OBJECT 元素定义了一个嵌入的对象.其引入的初衷是取代 IMG 和 APPLET 元素.不过由于安全等各方面原因以及缺乏浏览器支持,这一初衷并未实现.浏览器的对象支持依赖于对象类型.然而 ...

  3. IE下object元素遮挡div表单

    目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...

  4. CSS 解决z-index上层元素遮挡下层元素点击事件问题

    解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui  "2.8.2" Vue 2.9.6 需求 ...

  5. espresso 元素遮挡问题。

    在使用espresso进行测试的时候,点击一个横向列表的时候会在点击的项目下出现对应的横线. 实现方式是在FrameLayout下放两个TextView, 一个TextView包含下划线,默认是Fra ...

  6. ie6绝对定位的块会被select元素遮挡的解决方案

    RT(已无力吐槽ie),解决方法是:定义一个iframe,与想要显示的绝对定位的块设置为同一大小.放在同一个位置上.我的网页里绝对定位的元素是会随着鼠标移动显示和隐藏的,于是这个frame也要跟着显示 ...

  7. 网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素

    一:网页中插入flash代码如下:  当然里面的很多属性可以去掉,根据具体的需求而定.  我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...

  8. 子元素z-index高于父元素兄弟元素z-index被遮挡问题

    问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...

  9. 网页中创建音频、视频和Flash等多媒体：object元素

    <object>元素:它主要用于定义网页中的多媒体,比如音频.视频.Java applets.PDF.ActiveX和Flash.Object标签是成对出现的,在object标签内可以使用 ...

随机推荐

  1. 平方和与立方和 AC 杭电

    平方和与立方和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  2. NMAP扫描UDP123NTP端口详解

    我用的nmap版本:Zenmap 6.25 例如命令: nmap -sU -pU:123 -Pn -n --script=ntp-monlist IP 如果要批量进行,可以把IP存放在ip.txt可以 ...

  3. 转：基于开源项目OpenCV的人脸识别Demo版整理（不仅可以识别人脸，还可以识别眼睛鼻子嘴等）【模式识别中的翘楚】

    文章来自于:http://blog.renren.com/share/246648717/8171467499 基于开源项目OpenCV的人脸识别Demo版整理(不仅可以识别人脸,还可以识别眼睛鼻子嘴 ...

  4. Android之GPS应用开发

    LocationManager--------------->Context.LOCATION_SERVICE LocationProvider--------------->Locati ...

  5. C++实现发送HTTP请求

    #include <stdio.h>#include <windows.h>#include <wininet.h> #define MAXSIZE 1024#pr ...

  6. 许多js框架或js库的min版本是怎么做出来的？

    如jQuery,Bootstrap,AngularJs,这些都有min版本,代码更加精简,功能却相同.看了源代码,几乎不可读. 这种事情的工具类型叫做“minifier”.请看传送门:Minifica ...

  7. row cache lock

    SQL> col name format a30 SQL> select * from (select SAMPLE_TIME, SESSION_ID, NAME, P1, P2, P3, ...

  8. 【转】我的Android笔记（十）—— ProgressDialog的简单应用，等待提示

    原文网址:http://blog.csdn.net/barryhappy/article/details/7376231 在应用中经常会用到一些费时的操作,需要用户进行等待,比如加载网页内容…… 这时 ...

  9. 【转】BT5无法找到软件安装包（提供可用的BT更新源）

    像我这种一般想起才玩玩BT5的人,跟不上讯息的变化. 偶尔想尝试某个实验,然后去安装,发现提示无法找到软件安装包. 这个时候,应该注意到,现在已经从BT5到kali了,假如想我这种人,肯定比较少留意软 ...

  10. WC2015流水账

    THU那四场考试没考好,只有20+名.这也许是我OI生涯中最后一场吧(已确认是最后一场),真是感慨万千. day0 搬进浙大宿舍404房间(神房间号),四个人一间.中午发现学军伙食相当良心,是我参加的 ...