CSS3模糊效果導致懸停的奇怪陰影

我得到了一個HTML頁面，其中有一個DIV元素覆蓋整個背景與背景圖像，這個DIV也模糊了css3效果。CSS3模糊效果導致懸停的奇怪陰影

當我徘徊在坐在模糊div上方的元素上時，我會發現很多奇怪的陰影錯誤。

Chrome OSX上。

附截圖： enter image description here

這裏是我的背景CSS：

#background { 
    -webkit-transform: translate3d(0,0,0); 
    background-repeat: no-repeat !important; 
    background-position: center !important; 
    background-attachment: center fixed; 
    -webkit-transform: scale(1.1); 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    z-index: -1; 
    box-shadow: inset 0px 0px 230px 75px rgba(0,0,0,0.8); 
    overflow: hidden; 
    -webkit-transition: -webkit-filter 0.4s ease-in-out; 
} 

.backgroundblur { 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

來源

2014-01-16 Alon Carmel

你可以發表小提琴，或鏈接到此頁？ – kthornbloom

是的它看起來像你有一些風格級聯，不應該但不能肯定沒有檢查的dom。我可以說，一個跨瀏覽器兼容的替代方案是製作一個在Photoshop中模糊的背景圖像的副本，並切換背景圖像，而不是使用CSS模糊。 – mgrahamjo

頁面在線不可用，因爲它正在開發一個擴展的一部分。 –

也許你可以用這個樣本載入你的HTML。但是我猜這個問題是在#background元素中，因爲它上面應用了陰影，它看起來像你的內容也在那個元素中。

我試圖對<http://jsfiddle.net/zlajaa1/4s941ewz/>產生類似的效果。這裏的問題是負Z指數值。所以也許你可以嘗試和那個屬性一起玩。

如需更多幫助，請附上HTML。

來源

2014-11-22 19:51:59

CSS3模糊效果導致懸停的奇怪陰影

回答

相關問題