CSS3 模糊效果无法按预期工作答案

【问题标题】：CSS3 blur effect does not work as expectedCSS3 模糊效果无法按预期工作
【发布时间】：2015-02-17 00:54:19
【问题描述】：

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

#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

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

【问题讨论】：

你能发一个小提琴吗？或者向我们展示一些现场直播。
我会试试的。等几分钟。
@Mario 我们还需要查看标记。
@Mario rngst_overlay ？请发布小提琴或发布您的 html 标记
它确实有效，如果你有什么要模糊的：jsfiddle.net/zgzwaucw/2

标签： jquery css

【解决方案1】：

模糊滤镜适用于您设置它的元素。如果您对叠加层应用模糊，则只有叠加层会被模糊，而不是其下方的内容。要达到您所指的效果，您需要将页面的所有内容放入一个“包装器”div 并对其应用模糊过滤器。

这是一个例子：

setTimeout(function() {
  $(".modal-dialog").show();
  $("#contents").addClass("blurred");
}, 1500);

body {
  font: 14px "Sans Serif";
  overflow: hidden;
}

.blurred {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
}

#contents {
  width: 660px;
  height: 201px;
  background-image: url(http://i.stack.imgur.com/x5uHk.jpg);
  background-size: 660px auto;
}

.modal-dialog {
  position: absolute;
  box-sizing: padding-box;
  top: 100px;
  left: 330px;
  width: 300px;
  height: 80px;
  margin-top: -40px;
  margin-left: -150px;
  padding: 33px;
  text-align: center;
  background-color: white;
  
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="contents">
  <!-- Put all the site contents in this div -->
</div>

<div class="modal-dialog" style="display: none">
  This is a modal dialog
</div>

【讨论】：