4

我想创建一个带有css box-shadow的下拉菜单，并且我有一些使用flash的内容，问题是当下拉菜单出现并且后面有flash时，没有显示box-shadow。实际上 box-shadow 落后于 flash player

我简化了结构 http://i.imgur.com/QEjlt.jpg

我正在使用 Firefox 17.0.1 、 chrome 23.0.1271.97 和 flash player 11.5.502.135

风格

.test { position:absolute; z-index: 100; left:50%; top:30px; border:3px solid blue;width:200px; height:200px; background:gray; box-shadow:50px 50px 130px #000}
#flash{ position:absolute; left:50%; z-index:-100}

HTML结构

<div class="test"></div>
<div id="flash">    
<object width="100%" height="400" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="28bc2_2.swf" name="SRC">
<embed width="100%" height="400" src="28bc2_2.swf">
</object>
</div>

任何人都知道会发生什么以及解决方案，感谢您的帮助:)

4

3 回答 3

1

要获得 box-shadow 跨浏览器，您需要以下代码：

box-shadow: 50px 50px 130px #000;
-webkit-box-shadow: 50px 50px 130px #000;
-moz-box-shadow: 50px 50px 130px #000;

还可以尝试将wmode参数添加到 embed flash： 

<div class="test"></div>
<div id="flash">    
<object width="100%" height="400" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="28bc2_2.swf" name="SRC">
<param value="transparent" name="wmode">
<embed width="100%" height="400" wmode="transparent" src="28bc2_2.swf">
</object>

于 2012-12-26T11:39:43.570 回答
1

尝试添加：-moz-box-shadow:50px 50px 130px #000000;

于 2012-12-26T11:36:30.703 回答
0

除了使用跨浏览器 css ...（-moz- 和 -webkit- 就像其他人提到的那样）

尝试将 z-index 值设置为.test高于 的 z-index 值#flash。另外，尝试将#flash 放在带有.test类的 div 中。

现在，您似乎将 flash div 的 z-index 设置为 -100，而您的测试（这是您的菜单吗？）的 z-index 设置为 100...所以您的 flash 内容自然会落后.test。

于 2012-12-26T11:38:25.693 回答