CSS盒子阴影对图像/视频背景的divs不可能？

问题描述：

我在我的网站上正在进行superbgimage/jw球员背景。当我在背景上的内容div上应用CSS box-shadow时，阴影不会与背景混合（不会变暗）。它看起来像一个灰色的光环。盒子阴影只适用于白色背景吗？CSS盒子阴影对图像/视频背景的divs不可能？

的光环，而不是阴影与背景图像混合（变暗它）

Halo instead of shadow mixing with background image

CSS为superbgimage背景和jQuery同位素插件的div

#background { 
    background: inherit; 
    } 

#superbgimage { 
    display: none; 
    } 

.item { 
    margin-bottom: 4px; 
    -moz-box-shadow: 3px 3px 5px 6px #ccc; 
    -webkit-box-shadow: 3px 3px 5px 6px #ccc; 
    box-shadow: 3px 3px 5px 6px #ccc; 
    }

Div的背景

<fieldset id="background"> 
    <a href="media/background_0.jpg"></a> 
    <a href="media/background_1.jpg"></a> 
    <a href="media/background_2.jpg"></a> 
    ... 
</fieldset> 

<div id="superbgimage"></div>

背景的脚本

<script type="text/javascript"> 
$(document).ready(function() { 

$.fn.superbgimage.options = { 
    preload: 1, 
    randomtransition: 0, 
    slideshow: 1, 
    slide_interval: 9000, 
    randomimage: 1, 
    speed: 3000, 
    transition: 1 
}; 

$('#background').superbgimage().hide(); 

}); 
</script>

它可能你没有设置盒子阴影的正确属性。请张贴/ jsFile你的CSS和HTML，以便我们可以解决拍摄问题。 – Lowkase 2012-07-09 14:15:30

@Lokase谢谢，我在上面的编辑中提供了一些更多细节。 – Systembolaget 2012-07-09 14:33:39

答

确保您使用的是跨浏览器的解决方案是这样的：的

.shadow { 
-moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px #888; 
box-shadow: 0 0 5px #888; 
}

谢谢，这是对图像和视频的伎俩。 – Systembolaget 2012-07-09 14:54:15

答

使用RGBA颜色改为十六进制。 RGBA将允许您为颜色设置不透明度，以允许背景流血。

例子：

rgba(0,0,255,0.5)

在一个侧面说明，尽量使用CSS3元素，如框阴影在线发生器，它会采取了猜测工作创建这些更复杂的元素：

http://css3generator.com/

干杯，这也是一个有用的提示。 – Systembolaget 2012-07-09 14:55:50

CSS盒子阴影对图像/视频背景的divs不可能？

相关推荐