將 Flash 設為透明背景並嵌入網頁,能讓動畫與網頁元素完美融合,創造豐富視覺效果。本文詳細說明三種定位模式的語法與應用場景。
所有透明效果的關鍵在於 wmode="transparent" 參數:
適用於直接嵌入、不需精確定位的情況:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="550" height="400">
<param name="movie" value="movie.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="movie.swf" quality="high"
wmode="transparent"
width="550" height="400"
type="application/x-shockwave-flash"
pluginspage="https://www.macromedia.com/go/getflashplayer">
</embed>
</object>
Flash 固定在視窗特定位置,不隨瀏覽器縮放移動:
<div style="position: absolute; left: 100px; top: 50px; z-index: 1;">
<object ...>
<param name="wmode" value="transparent" />
<embed ... wmode="transparent" />
</object>
</div>
使用 CSS position: absolute 精確控制位置,z-index 控制疊放順序。
Flash 跟隨表格容器縮放,適合響應式版面:
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"
background="background.jpg">
<tr>
<td align="center" valign="middle">
<object width="100%" height="100%">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="flash.swf" width="100%" height="100%"
quality="high" wmode="transparent"
type="application/x-shockwave-flash">
</embed>
</object>
</td>
</tr>
</table>
優勢:
<object> 內提供替代圖片或文字,給無 Flash 外掛的使用者| 問題 | 可能原因 | 解決方法 |
|---|---|---|
| 背景不透明 | wmode 拼寫錯誤或遺漏 | 確認 object/embed 都設定 wmode="transparent" |
| Flash 遮擋選單/DIV | z-index 設定錯誤 | Flash 容器 z-index 低於彈出選單 |
| 透明區域顯示白色 | 舞台背景色未設為透明 | Flash 製作階段就不繪製背景,或設定舞台背景為無 |