【HTML+CSS基础】HTML元素遮挡Flash之梦
浏览数：24 /
时间：2015年06月09日
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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
