CSS box-shadow на divs над фоном изображения / видео невозможен?

Question

У меня на моем веб-сайте есть опыт суперпредставителя /jw player. Когда я применяю блочную тень CSS к элементам содержимого над фоном, тень не смешивается (не темнеет) с фоном. Похоже на серый ореол. Тени box работают только на белом фоне?

Ореол вместо смешивания теней с фоновым изображением (затемнение)

CSS для фона superbgimage и плагинов jQuery Isotope

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

Answer 1

Убедитесь, что вы используете кросс-браузерное решение, подобное этому:

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

Answer 2

Используйте цвета RGBA вместо HEX. RGBA позволит вам установить непрозрачность для цвета, позволяя фону просвечивать.

Пример:

rgba(0,0,255,0.5)

Напомним, попробуйте использовать онлайн-генератор для элементов CSS3, таких как box-shadow, и вам понадобится догадаться о создании этих более сложных элементов:

http://css3generator.com/