?頁面構建中的Flash層會遮擋Div的問題，一般通過設置wmode="transparent" 或wmode="window"就可以解決。不過對于Flash視頻這個貌似不太湊效。

對于Flash遮擋的問題，首先來了解一些wmode的一些屬性值。

wmode的5種取值

Window模式

默認情況下的顯示模式，在這種模式下 flash player 有自己的窗口句柄，這就意味著 flash 影片是存在于 Windows 中的一個顯示實例，并且是在瀏覽器核心顯示窗口之上的，所以 flash 只是貌似顯示在瀏覽器中，但這也是 flash 最快最有效率的渲染模式。由于他是獨立于瀏覽器的HTML渲染表面，這就導致默認顯示方式下flash總是會遮住位置與他重合的所有 HTML 層。

Opaque模式

這是一種無窗口模式，在這種情況下flash player沒有自己的窗口句柄，這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪制的時間和位置。這時flash影片就不會在高于瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上，因此你就可以使用 z-index 值來控制 HTML 元素是遮蓋 flash 或者被遮蓋。

Transparent模式

透明模式，在這種模式下 flash player 會將 stage 的背景色 alpha 值降為 0 并且只會繪制 stage 上真實可見的對象，同樣你也可以使用 z-index 來控制 flash 影片的層級值，但是與 Opaque 模式不同的是這樣做會降低 flash 影片的回放效果，而且在 9.0.115 之前的 flash player 版本設置 wmode="opaque" 或 "transparent" 會導致全屏模式失效。

Direct模式

直接渲染模式，在該模式下，flash player 可以通過硬件直接對畫面進行合成，并呈現在屏幕上。使用這種模式能夠得到比 window 模式更好的渲染效果，特別是在視頻播放方面，如果頁面的 flash 需要使用了 stagevideo 或者 stage3D，那么必須使用這種模式。它有比 window 模式更好的渲染，但也有 window 模式下的所有缺點。

GPU模式

在一些網絡電視和移動設備上可以啟用額外的硬件加速，與其他 wmode 值模式相比，顯示序列的像素保真度無法保證，其他方面跟 direct 模式相似。?

div遮蓋Flash層測試結論

1.使用 opaque/transparent 模式，只需 div 就可以遮擋住 Flash，對于Flash視頻，IE中的div層需要嵌套iframe標簽才可以遮擋；

2.使用 window/direct/gpu 模式：

IE 需要借助 iframe 才能遮擋 Flash

Chrome 僅 div 即可遮擋 Flash

Firefox 當使用 rgba 的半透明背景色浮層時，無法遮擋 Flash，只有具有背景色(background-color:#fff)的元素才能遮擋 Flash，透明背景(background:transparent)，或者背景顏色為半透明(background-color:rgba(255,255,255,0.5))，或者使用半透明圖片(background:url(alpha.png))做背景的元素都無法遮擋 Flash?

Windows Safari 即使 iframe 也無法遮擋 Flash

Mac 系統下 wmode 取任何值， div 元素都能輕松遮擋 Flash 元素

參考：

div 浮層遮蓋 flash 問題再研究

div層遮蓋flash(兼容瀏覽器)

轉載于:https://www.cnblogs.com/GeniusLyzh/p/4651622.html

總結

以上是生活随笔為你收集整理的如何解决div层被flash遮盖的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。