1769国产精品视频免费观看,国产91九色在线播放

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

html元素遮擋flash詳解示例

來源：易賢網(wǎng) 閱讀：752 次日期：2014-09-23 15:23:52

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

代碼如下:

wmode參數(shù)：

transparent模式：可用z-index控制層級(jí)

opaque模式：可用z-index控制層級(jí)

window模式：flash層級(jí)在瀏覽器核心顯示窗口之上，flash會(huì)蓋住與他重合的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遮擋層在同一個(gè)頁面

注：如果要兼容Safari、Opera，那么請(qǐng)直接告訴需求這個(gè)遮不了

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是被一個(gè)iframe頁面引入的

注：如果木有權(quán)限操作iframe頁面，那么請(qǐng)直接告訴需求這個(gè)遮不了注：如果要兼容Safari、Opera，那么請(qǐng)直接告訴需求這個(gè)遮不了

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>

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

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

上一篇：html meta viewport屬性說明

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

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

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

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

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

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

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

HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼(增進(jìn)用戶體驗(yàn))10月30日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2025國考·省考課程試聽報(bào)名

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼