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. 转：Gulp的目标是取代Grunt

    原文来自于:http://www.infoq.com/cn/news/2014/02/gulp Fractal公司积极参与了数个流行Node.js模块的开发,它最近发布了一个新的构建系统gulp,希望 ...

  2. Ubuntu 下升级git到最新版

    $ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git

  3. Java: for(;;) vs. while(true)

    What is the difference between a standard while(true) loop and for(;;)? Is there any, or will both b ...

  4. windows 查看文件被哪个进程占用

    经常当我们删除文件时,有时会提示[操作无法完成,因为文件已在另一个程序中打开,请关闭该文件并重试],到底是哪些程序呢? 有时候一个一个找真不是办法,已经被这个问题折磨很久了,今天下决心要把它解决,找到 ...

  5. cf581D Three Logos

    Three companies decided to order a billboard with pictures of their logos. A billboard is a big squa ...

  6. 深入理解C#第二版笔记

    基础知识 委托 如果代码想要执行操作,但不知道操作细节,一般可以使用委托.例如:Thread类之所以知道要在一个新线程里运行什么,唯一的原因就是在启动新线程时,向它提供了一个ThreadStart委托 ...

  7. for

    1,cout在显示bool值之前将他们转换为int,但cout.setf(ios::boolalpha)函数调用设置了一个标记,标记命令cout显示true 和 false 而不是 1 和0;

  8. 40 个重要的 HTML5 面试问题及答案

    本文将列出40个重要的HTML 5面试问题及答案,祝各位求职顺利. 目录 介绍 Canvas和SVG图形之间的区别是什么? 如何使用Canvas和SVG绘制矩形? 什么是CSS选择器? 如何使用ID值 ...

  9. java笔记2之算术运算符

    1运算符是什么呢 对常量和变量进行操作的运算符 2运算符分为哪些 算术运算符(+,-,*,/), 赋值运算符 比较运算符 逻辑运算符 位运算符 三目运算符 3运算符 A 算术运算符的注意事项 (1)整 ...

  10. Spring的StringUtils工具类

    本文是转载文章,感觉比较好,如有侵权,请联系本人,我将及时删除. 原文网址:<Spring的StringUtils工具类> org.springframework.util.StringU ...