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. Application.Count.ToString()和Application["count"].ToString()的区别

    当属性名中包括特殊字符如 “.”或“-”就不能使用“.”操作符了.操作符只能使用[ ]操作符 为了统计网站的在线人数,我们可以在Global.asa文件中包含如下代码: <SCRIPT LANG ...

  2. -fembed-bitcode is not supported on versions of iOS prior to 6.0

    -fembed-bitcode is not supported on versions of iOS prior to 6.0   说法二 错误提示 -fembed-bitcode is not s ...

  3. obj文件的连接问题以及tlib的基本用法

    1.基础研究 用tcc将程序编译为.obj文件. 这里也可以使用tcc -linclude run.c来将run.c文件编译成run.obj文件. 再用tcc对下面的程序进行编译链接,发现提示错误: ...

  4. Altium Designer 里面怎么画等长线

    (1)一般是将走线布完后,新建一个class. Design -> Classes 如上图添加完后可以点击close. (2)快捷键 T + R: 或者 点击Tools 下拉中的Interact ...

  5. HDU_2034——集合A-B

    Problem Description 参加过上个月月赛的同学一定还记得其中的一个最简单的题目,就是{A}+{B},那个题目求的是两个集合的并集,今天我们这个A-B求的是两个集合的差,就是做集合的减法 ...

  6. codeforces 277.5 div2 F：组合计数类dp

    题目大意: 求一个 n*n的 (0,1)矩阵,每行每列都只有两个1 的方案数 且该矩阵的前m行已知 分析: 这个题跟牡丹江区域赛的D题有些类似,都是有关矩阵的行列的覆盖问题 牡丹江D是求概率,这个题是 ...

  7. 51nod-正整数分组问题(基础方程DP-01背包)

    正整数分组 将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的. 思路: 这题的实质其实也是0-1背包问 ...

  8. 如何解决ajax跨域问题

    如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题 ...

  9. Oracle_表数据拆分与合并

    参考文档: [1]http://blog.itpub.net/8858072/viewspace-426960/ [2]http://blog.csdn.net/mattlinsheep/articl ...

  10. pods 这两篇就够了

    http://www.cnblogs.com/gongyuhonglou/p/5801681.html http://blog.csdn.net/iunion/article/details/1701 ...