四虎影视永久在线精品,人人操人人干人人看

當前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁制作

html元素遮擋flash詳解示例

來源：易賢網(wǎng) 閱讀：1236 次日期：2014-05-09 14:14:29

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

代碼如下:

wmode參數(shù)：

transparent模式：可用z-index控制層級

opaque模式：可用z-index控制層級

window模式：flash層級在瀏覽器核心顯示窗口之上，flash會蓋住與他重合的html

情景1（可修改flash的wmode參數(shù)）

修改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參數(shù)）-- 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參數(shù)）-- flash是被一個iframe頁面引入的

注：如果木有權(quán)限操作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>

詳細出處參考：http://www.jb51.net/web/154726.html

更多信息請查看IT技術(shù)專欄

更多信息請查看網(wǎng)頁制作

上一篇：dom操作表格示例(dom創(chuàng)建表格)

下一篇：html meta viewport屬性說明

易賢網(wǎng)手機網(wǎng)站地址：html元素遮擋flash詳解示例

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關(guān)閱讀網(wǎng)頁制作

使用CSS制作立體導(dǎo)航欄10月30日

用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭10月30日

有關(guān)HTML5中背景音樂的自動播放功能10月30日

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

html5實現(xiàn)圖片轉(zhuǎn)圈的動畫效果——讓頁面動起來10月30日

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

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

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

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

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

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

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

利用純CSS實現(xiàn)居中的七大方法示例09月29日

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

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

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

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

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

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

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

易賢網(wǎng)移動網(wǎng)站

2025國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼