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. 『C # 开发』技能 Get√ ——制作CMD界面的简单GIF图片

    今天看到C#课本上个列子把星号(*)有规则打印在控制台中间位置 程序不难,利用的是光标定位函数Console.SetCursorPosition(x, y)做到的 心想是不是弄出一个动态的图案比较好玩 ...

  2. javascript 版的 SuperMario

    注册博客园4年了,还没发表过一篇文章.明年就是超级马里奥这款游戏诞生30周年了,作为一个喜欢2d卷轴游戏的玩家,决定用js实现一个.目前只实现了基本玩法,得分什么的也还没做.项目的GitHub的地址是 ...

  3. Spark 资源调度及任务调度

    1.  资源分配 通过SparkSubmit进行提交应用后,首先会创建Client将应用程序(字节码文件.class)包装成Driver,并将其注册到Master.Master收到Client的注册请 ...

  4. 转：堆(heap)和栈(stack)有什么区别??

    简单的可以理解为: heap:是由malloc之类函数分配的空间所在地.地址是由低向高增长的. stack:是自动分配变量,以及函数调用的时候所使用的一些空间.地址是由高向低减少的. 预备知识—程序的 ...

  5. DOCKER脚本一例---快速建立大批测试机

    这个会由一系列的脚本构成,比如: 系统重启后,如何快速恢复服务,如何建立网桥(也可一次写入),如何在新系统上快速部署. ADDBRIDGE #!/bin/sh br_name=br100 brctl ...

  6. 调整altium designer15的十字光标大小

    在左上角的DXP下preferences中调整.首先打开该窗口. 1.原理图:schematic-----graphical editing,此窗口中cursor栏有个cursor type,其下拉菜 ...

  7. Linux下配置QT环境

    一.下载Qt源码包到本机,然后解压缩 #tar zxvf qt-x11-opensource-src-4.3.2.tar.gz -C /usr/local //将qt-x11-opensource-s ...

  8. java调优随记-堆和栈

    基础知识: 关于堆和栈,堆和栈是程序运行的关键,关于堆和栈的定义和解释可自行搜索,我比较认可以程序运行过程中他们扮演的角色作为对比的点:堆是存储的单位,而栈是程序运行时的单位.栈解决的是程序的运行问题 ...

  9. 2014-08-13　SQL语句之Left Join

    今天是在吾索实习的第26天.这天在处理数据库数据的时候发现了一个不错的语句就是Left Join,即左连接.  其功能是:即使右表中没有匹配,也从左表返回所有的行.也就是说,显示的行数与左表一致,且当 ...

  10. Subarray Sum Closest

    Question Given an integer array, find a subarray with sum closest to zero. Return the indexes of the ...