CSS3模糊效果在懸停時導致怪異的陰影

Question

我有一個html頁面，其中有一個DIV元素覆蓋了整個背景，並帶有背景圖像，該DIV也對其具有模糊的css3效果。

每當我將鼠標懸停在位於模糊div上方的元素上時，就會發生很多奇怪的陰影錯誤。

Chrome在OSX上。

附件截圖：

這是我的背景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);
}

Answer 1

也許您可以使用此示例加載HTML。 但是我想問題出在#background元素中，因為它上面有陰影，看起來您的內容也位於該元素中。

我試圖在<http://jsfiddle.net/zlajaa1/4s941ewz/>上產生類似的效果。 這里的問題是Z索引值為負。 因此，也許您也可以嘗試使用該屬性。

如需更多幫助，請在此附加HTML。