脚本宝典收集整理的这篇文章主要介绍了html元素遮挡flash详解示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
wmode参数：
transparent模式：可用z
-index控制层级
opaque模式：可用z-index控制层级
window模式：flash层级在浏览器核心显示窗口之上，flash会盖住与他重合的ht
ML情景1（可修改flash的wmode参数）
修改wmode属性为，transparent或opaque
DEMO如下：
<!docty
PE html>
<html lang="en">
<head>
<
;meta charset="UTF-8">
<t
ITle> HTML元素遮挡Flash - 情景1 </title>
<style>
html, body, object, embed{ padding: 0; m
argin: 0; }
.m-box { position: relative; }</p>
<p> .m-flash, .m-flash embed { width: 400px; }
.m
-shadow { position: absolute; top: 0; left: 0; width: 100px; h
eight: 100px; background-color:
#ccc; }
</style>
</head>
<body>
<!-
-transparent-->
<div class="m-box">
<object class="m-flash" classid="clsid:D27CDB6E-AE6D-11
CF-96B8-444553540000">
<par
am 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 class="m-shadow">
Jununx，欢迎您！--transparent
</div>
</div></p>
<p><!--opaque-->
<div class="m-box">
<object class="m-flash" 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 class="m-shadow">
Jununx，欢迎您！--opaque
</div>
</div></p>
<p></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; mar
gin: 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 class="m-box">
<object class="m-flash" 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 class="m-shadow">
<div class="m-shadow-txt">Jununx，欢迎您！--window</div>
<iframe class="m-shadow-ifr" 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-->
<div class="m-box">
<iframe class="m-flash" src="ifr.html" frameborder="0"></iframe></p>
<p> <div class="m-shadow">
<div class="m-shadow-txt">Jununx，欢迎您！--window</div>
<iframe class="m-shadow-ifr" frameborder="0"></iframe>
</div>
</div></p>
<p></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="<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 class="ifr" frameborder="0"></iframe>
</body>
</html>
脚本宝典总结
以上是脚本宝典为你收集整理的html元素遮挡flash详解示例全部内容，希望文章能够帮你解决html元素遮挡flash详解示例所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。