javascript - 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-index 值。因此，也许您也可以尝试使用该属性。

如需更多帮助，请附上 HTML。