CSS框阴影在图像/视频背景不可能？ [英] CSS box-shadow on divs over image/video background impossible?

问题描述

我在我的网站上有一个superbgimage / jw播放器背景。当我在背景上的内容div上应用CSS盒子阴影时，阴影不会与背景混合（不变暗）。它看起来像一个灰色的光环。

I'm having a superbgimage/jw player background on my website in progress. When I apply a CSS box-shadow on the content divs above the background, the shadow does not mix (does not darken) with the background. It looks like a grey halo. Do box-shadows only work on white backgrounds?

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

Halo instead of shadow mixing with background image (darkening it)

CSS超对象背景和jQuery Isotope插件divs

CSS for superbgimage background and jQuery Isotope plugin divs

#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;
    }

背景的分割

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

推荐答案

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

Make sure you are using a cross-browser solution like this:

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

这篇关于CSS框阴影在图像/视频背景不可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！