国产精品一级,久草在线资源站资源站,亚洲一区二区免费看

當前位置：首頁 > 范文|應用文 > IT技術專欄 > 網頁制作

html元素遮擋flash詳解示例

來源：易賢網閱讀：2314 次日期：2014-04-22 15:48:27

溫馨提示：易賢網小編為您整理了“html元素遮擋flash詳解示例”,方便廣大網友查閱！

這篇文章主要介紹了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屬性說明

下一篇：html標簽中的this使用介紹

易賢網手機網站地址：html元素遮擋flash詳解示例

由于各方面情況的不斷調整與變化，易賢網提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢為準！

相關閱讀網頁制作

使用CSS制作立體導航欄10月30日

用純CSS3實現網頁中常見的小箭頭10月30日

有關HTML5中背景音樂的自動播放功能10月30日

HTML5、Select下拉框右邊加圖標的實現代碼(增進用戶體驗)10月30日

html5實現圖片轉圈的動畫效果——讓頁面動起來10月30日

html5清空畫布方法(三種)10月30日

HTML實現移動端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務器10月30日

Dreamweaver怎么設計彩色邊框的表格?10月30日

Dreamweaver怎么給個人簡歷添加照片并排版?10月30日

基于HTML5的WebGL實現json和echarts圖表展現在同一個界面10月30日

解決HTML5手機端頁面縮放的問題10月30日

利用純CSS實現居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網頁排版09月29日

HTML5+CSS3 實現靈動的動畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動畫技巧與細節09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網移動網站

中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久