CSS3模糊效果会在悬停时产生奇怪的阴影

Question

我有一个html页面，其中有一个DIV元素覆盖整个背景和背景图像，这个DIV也有模糊的css3效果。

当我悬停在模糊div上方的元素时，我会发现很多奇怪的阴影错误。

OSX上的Chrome。

附上截图：

这是我的背景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。