background - 图像/视频背景上 div 上的 CSS box-shadow 不可能吗?

标签 background css

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

光晕而不是阴影与背景图像混合(使其变暗)

Halo instead of shadow mixing with background image

用于 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>

最佳答案

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

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

关于background - 图像/视频背景上 div 上的 CSS box-shadow 不可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11396753/

相关文章:

html - 将 2 个 div 对齐并向右对齐

CSS。边框外背景

html - CSS - 如何设置背景图像在 IE11 中拉伸(stretch)

swiftui - 如何对齐 View 底部尾随,覆盖在 SwiftUI 中剪辑在屏幕边缘的另一个 View 上?

javascript - 图像作为游戏世界背景,缩放 Sprite (元素)

html - 右边框不显示

html - Internet Explorer 8 背景色环绕在下方

html - 使用 CSS 删除文本基线下方的空间

html - 默认的 HTML/CSS 链接颜色是什么?

javascript - 当页面向下滚动时,我怎样才能使这个背景变得不那么透明?