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>

來源

2012-07-09 Systembolaget

它可能你沒有設置盒子陰影的正確屬性。請張貼/ 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; 
}

來源

2012-07-09 14:22:06

謝謝，這是對圖像和視頻的伎倆。 – Systembolaget 2012-07-09 14:54:15

使用RGBA顏色改爲十六進制。 RGBA將允許您爲顏色設置不透明度，以允許背景流血。

例子：

rgba(0,0,255,0.5)

在一個側面說明，儘量使用CSS3元素，如框陰影在線發生器，它會採取了猜測工作創建這些更復雜的元素：

http://css3generator.com/

來源

2012-07-09 14:37:08 Lowkase

乾杯，這也是一個有用的提示。 – Systembolaget 2012-07-09 14:55:50

CSS盒子陰影對圖像/視頻背景的divs不可能？

回答

相關問題