html元素遮挡flash详解示例

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

html元素遮挡flash详解示例

来源：阅读：697 次日期：2014-09-23 15:23:52

温馨提示：小编为您整理了“html元素遮挡flash详解示例”,方便广大网友查阅！

代码如下:

wmode参数：

transparent模式：可用z-index控制层级

opaque模式：可用z-index控制层级

window模式：flash层级在浏览器核心显示窗口之上，flash会盖住与他重合的html

情景1（可修改flash的wmode参数）

修改wmode属性为，transparent或opaque

DEMO如下：

代码如下:

<!doctype html>

<head>

<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>

</object></p> <p> <div class="m-shadow">

Jununx，欢迎您！--transparent

</div>

</div></p> <p>

</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>

<head>

<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>

</object></p> <p> <div class="m-shadow">

<div class="m-shadow-txt">Jununx，欢迎您！--window</div>

</div>

</div></p> <p></body>

</html>

情景3（不可修改flash的wmode参数）-- flash是被一个iframe页面引入的

注：如果木有权限操作iframe页面，那么请直接告诉需求这个遮不了注：如果要兼容Safari、Opera，那么请直接告诉需求这个遮不了

DEMO页：

代码如下:

<!doctype html>

<head>

<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>

<div class="m-shadow-txt">Jununx，欢迎您！--window</div>

</div>

</div></p> <p></body>

</html>

iframe页：

代码如下:

<!doctype html>

<head>

<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>

</object></p> <p><iframe class="ifr" frameborder="0"></iframe>

</body>

</html>

更多信息请查看IT技术专栏

上一篇：html meta viewport属性说明

下一篇：dom操作表格示例(dom创建表格)

手机网站地址：html元素遮挡flash详解示例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！