html 控制flash,html元素遮挡flash详解示例

最新推荐文章于 2022-03-03 10:53:11 发布

weixin_39914863

最新推荐文章于 2022-03-03 10:53:11 发布

阅读量140

点赞数

文章标签： html 控制flash

本文探讨了如何通过调整Flash的wmode参数来实现HTML元素与Flash的层级控制，以解决遮挡问题。介绍了transparent、opaque和window三种模式下的不同行为，并提供了示例代码，展示了在能修改和不能修改Flash wmode参数时的情景，以及当Flash位于iframe中时的处理策略。需要注意的是，某些情况可能无法在Safari和Opera浏览器中实现完美遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复制代码代码如下:

wmode参数：

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

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

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

情景1(可修改flash的wmode参数)

修改wmode属性为，transparent或opaque

DEMO如下：

复制代码代码如下:

HTML元素遮挡Flash - 情景1

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

http://www.aa.net/i/bookmark.swf">

http://www.aa.net/i/bookmark.swf">>

Jununx，欢迎您！--transparent

http://www.aa.net/i/bookmark.swf">

http://www.aa.net/i/bookmark.swf">>

Jununx，欢迎您！--opaque

情景2(不可修改flash的wmode参数)-- flash和你的iframe遮挡层在同一个页面

注：如果要兼容Safari、Opera，那么请直接告诉需求这个遮不了

DEMO如下：

复制代码代码如下:

HTML元素遮挡Flash - 情景2

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); }

http://www.aa.net/i/bookmark.swf">

http://www.aa.net/i/bookmark.swf">>

Jununx，欢迎您！--window

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

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

DEMO页：

复制代码代码如下:

HTML元素遮挡Flash - 情景2

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); }

Jununx，欢迎您！--window

iframe页：

复制代码代码如下:

HTML元素遮挡Flash - 情景3

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

http://www.aa.net/i/bookmark.swf">

http://www.aa.cn/i/bookmark.swf">>