html元素遮挡flash示例详细介绍

来源：动视网责编：小采时间：2020-11-27 15:35:33

html元素遮挡flash示例详细介绍

html元素遮挡flash示例详细介绍:这篇文章主要介绍了html元素遮挡flash详解示例,需要的朋友可以参考下代码如下:wmode参数： transparent模式：可用z-index控制层级 opaque模式：可用z-index控制层级 window模式：flash层级在浏览器核心显示窗口之上，flash会盖住与他重合的html情景

推荐度：

点击下载本文 文档为doc格式

导读html元素遮挡flash示例详细介绍:这篇文章主要介绍了html元素遮挡flash详解示例,需要的朋友可以参考下代码如下:wmode参数： transparent模式：可用z-index控制层级 opaque模式：可用z-index控制层级 window模式：flash层级在浏览器核心显示窗口之上，flash会盖住与他重合的html情景

这篇文章主要介绍了html元素遮挡flash详解示例,需要的朋友可以参考下

代码如下:

wmode参数：
transparent模式：可用z-index控制层级
opaque模式：可用z-index控制层级
window模式：flash层级在浏览器核心显示窗口之上，flash会盖住与他重合的html

情景1（可修改flash的wmode参数）
修改wmode属性为，transparent或opaque

DEMO如下：

代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML元素遮挡Flash - 情景1 </title>
<style>
html, body, object, embed{ padding: 0; margin: 0; }
.m-box { position: relative; }</p> <p> .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>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</object></p> <p> <div>
Jununx，欢迎您！--transparent
</div>
</div></p> <p><!--opaque-->
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="opaque"/>
<embed wmode="opaque" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</object></p> <p> <div>
Jununx，欢迎您！--opaque
</div>
</div></p> <p></body>
</html>

情景2（不可修改flash的wmode参数）-- flash和你的iframe遮挡层在同一个页面
注：如果要兼容Safari、Opera，那么请直接告诉需求这个遮不了

DEMO如下：
代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML元素遮挡Flash - 情景2 </title>
<style>
html, body, object, embed{ padding: 0; margin: 0; }
.m-box { position: relative; }</p> <p> .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>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="window"/>
<embed wmode="window" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</object></p> <p> <div>
<div>Jununx，欢迎您！--window</div>
<iframe frameborder="0"></iframe>
</div>
</div></p> <p></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; }</p>
<p> .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-->
<p class="m-box">
 <iframe class="m-flash" src="ifr.html" frameborder="0"></iframe></p>
<p> <p class="m-shadow">
 <p class="m-shadow-txt">Jununx，欢迎您！--window</p>
 <iframe class="m-shadow-ifr" frameborder="0"></iframe>
 </p>
</p></p>
<p></body>
</html>

iframe页：

代码如下:

<!doctype html>
<html>
<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 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="window"/>
<embed wmode="window" src="<a href="http://www.aa.cn/i/bookmark.swf"></embed">http://www.aa.cn/i/bookmark.swf"></embed</a>>
</object></p> <p><iframe frameborder="0"></iframe>
</body>
</html>

更多html元素遮挡flash示例详细介绍相关文章请关注PHP中文网！

html元素遮挡flash示例详细介绍

推荐度：

点击下载本文 文档为doc格式

标签： html 示例实例

热门焦点

html元素遮挡flash示例详细介绍

html元素遮挡flash示例详细介绍

html元素遮挡flash示例详细介绍

最新推荐

猜你喜欢

热门推荐