很簡單的一個例子,外層一個黃色背景的div,然後裏面有一個flash,緊接着是一個絕對位置的div(爲了讓第二個div的文字和flash重疊.)
flash是從w3school embed例子裏面摳的.
wmode='window' --> 默認
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<div style="background:yellow;width:400px;height:400px">
<embed type="application/x-shockwave-flash" wmode="window" src="helloworld.swf" />
<div style="position:absolute;top:10px;left:10px;">abcd</div>
</div>
</body>
</html>
可以看到,flash把父div的背景和兄弟div的文字都遮住了.
wmode='opaque'
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<div style="background:yellow;width:400px;height:400px">
<embed type="application/x-shockwave-flash" wmode="opaque" src="helloworld.swf" />
<div style="position:absolute;top:10px;left:10px;">abcd</div>
</div>
</body>
</html>
flash把父div的背景遮住,兄弟div的文字疊在自己上面.
wmode='transparent''
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<div style="background:yellow;width:400px;height:400px">
<embed type="application/x-shockwave-flash" wmode="transparent" src="helloworld.swf" />
<div style="position:absolute;top:10px;left:10px;">abcd</div>
</div>
</body>
</html>
flash沒有擋住父div背景和兄弟div的文字.
然後,總結:
wmode = window mode
window 模式
默認的顯示模式.
默認情況下的顯示模式，在這種模式下flash player有自己的窗口句柄，這就意味着flash影片是存在於Windows中的一個顯示實例，並且是在瀏覽器核心顯示窗口之上的，所以flash只是貌似顯示在瀏覽器中，但這也是flash最快最有效率的渲染模式。由於他是獨立於瀏覽器的HTML渲染表面，這就導致默認顯示方式下flash總是會遮住位置與他重合的所有DHTML層。
Opaque 模式
oqaque = 不透明的
這是一種無窗口模式，在這種情況下flash player沒有自己的窗口句柄，這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪製的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋.
Transparent 模式
transparent = 透明的
在這種模式下flash player會將stage的背景色alpha值將爲0並且只會繪製stage上真實可見的對象，同樣你也可以使用z-index來控制flash影片的深度值，但是與Opaque模式不同的是這樣做會降低flash影片的回放效果，而且在9.0.115之前的flash player版本設置wmode=”opaque”或”transparent”會導致全屏模式失效.