0

我的网站正在制作一个 supergimage/jw 播放器背景。当我在背景上方的内容 div 上应用 CSS box-shadow 时，阴影不会与背景混合（不会变暗）。它看起来像一个灰色的光环。盒子阴影只适用于白色背景吗？

光晕而不是与背景图像混合的阴影（使其变暗）

光晕而不是与背景图像混合的阴影

用于 supergimage 背景和 jQuery Isotope 插件 div 的 CSS

#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>
4

2 回答 2

2

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

.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
于 2012-07-09T14:22:06.487 回答
1

使用 RGBA 颜色而不是 HEX。RGBA 将允许您设置颜色的不透明度，以允许背景渗出。

例子：

rgba(0,0,255,0.5)

顺便说一句，尝试使用在线生成器生成 CSS3 元素（如 box-shadow），这样可以消除创建这些更复杂元素的猜测工作：

http://css3generator.com/

于 2012-07-09T14:37:08.407 回答