CSS3模糊效果会在悬停时产生奇怪的阴影 [英] CSS3 Blur effect causes weird shadows on hover

问题描述

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

I got an html page where there is a DIV element covering the whole background with a background image, This DIV has also Blurred css3 effect on it.

Chrome浏览器在OSX上。

Chrome on OSX.

附加屏幕截图：

Attached screenshot:

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

推荐答案

与此样品。但我想这个问题是在#background元素，coz有阴影应用它，它看起来像你的内容也在该元素。

Maybe you could load your HTML with this sample. But I guess that problem is in #background element, coz there's shadow applied on it, and it look like your content is in that element also.

我试图产生类似对< http：//jsfiddle.net/zlajaa1/4s941ewz/> 的效果。这里的问题是负z-index值。所以也许你可以尝试玩这个属性。

I tried to produce similar effect on <http://jsfiddle.net/zlajaa1/4s941ewz/> . Problem here is negative z-index value. So maybe you can try to play with that property also.

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

For more help, attach HTML with this please.

这篇关于CSS3模糊效果会在悬停时产生奇怪的阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！