Question

我有一个简单的模态窗口。

#overlay {
z-index: 99998;
position: fixed;
background:rgba(0,0,0,0.8);
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
cursor: pointer;
display: block; 
}

#modalDialog {
border-radius: 3px;
width: 620px;
position: fixed; 
top: 10%;
left: 50%;
margin-left: -310px;
background-color: rgba(255,255,255,1);
color: #505260;
display: none; 
opacity: 0; 
z-index: 99999; 
}

工作正常。我想用动画模糊背景，但发生了一些错误。这是代码：

 $('#overlay')
                .css('filter', 'blur(3px)')
                .css('webkitFilter', 'blur(3px)')
                .css('mozFilter', 'blur(3px)')
                .css('oFilter', 'blur(3px)')
                .css('msFilter', 'blur(3px)')
                .css('transition', 'all 0.5s ease-out')
                .css('-webkit-transition', 'all 0.5s ease-out')
                .css('-moz-transition', 'all 0.5s ease-out')
                .css('-o-transition', 'all 0.5s ease-out');

正如您在图像上看到的那样，对话框模糊效果效果很好，但是背景 - 仅模糊边缘。小提琴 - jsfiddle.net/zgzwaucw/1

请去小提琴，你可以看到边缘模糊。我想模糊背景。

CSS3模糊效果无法正常工作

0 个答案: