• • 2016年10月更新**

由于-moz-element()属性似乎没有被其他浏览器广泛支持，除了FF，还有一种更简单的技术可以在不影响容器内容的情况下应用模糊，在这种情况下，结合svg blur filter使用伪元素是理想的。

• • 一个
• （演示在FF v49，Chrome v53，Opera 40中测试-IE似乎不支持模糊无论是css或svg过滤器）*

到目前为止，在没有js插件的情况下在背景中使用模糊效果的唯一方法是结合使用-moz-element()属性和svg模糊滤镜。使用-moz-element()，您可以将一个元素定义为另一个元素的背景图像。然后应用svg模糊滤镜。可选：如果您的背景位于fixed位置，则可以使用一些jQuery进行滚动。
See my demo here
我知道这是一个相当复杂的解决方案，并限于FF（element()只适用于Mozilla目前与-moz-element()属性），但至少有some effort在过去实现的webkit浏览器，并希望它将实现in the future。

在最近版本的主要浏览器中，您可以使用backdrop-filter属性。

• • 超文本标记语言**

<div>backdrop blur</div>

• • 中央支助组**

div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

或者如果您需要不同的背景颜色浏览器没有支持：

div {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    div {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);  
    }
}

演示：JSFiddle
文件：Mozilla Developer: backdrop-filter
是给我的吗？：CanI使用

您可以使用伪元素将内容定位为背景，并使用与背景相同的图像，但使用新的CSS3滤镜进行模糊处理。
您可以在这里看到它的实际应用：http://codepen.io/jiserra/pen/JzKpx
我做了自定义选择，但我添加了模糊背景效果。

有一种简单且非常常见的技术，使用2个背景图像：一个清晰的和一个模糊的。你设置清晰的图像作为身体的背景，模糊的图像作为你的容器的背景图像。模糊的图像必须设置为固定的位置，对齐是100%完美的。我以前用过，效果很好。

body {
    background: url(yourCrispImage.jpg) no-repeat;
}

#container {
    background: url(yourBlurryImage.jpg) no-repeat fixed;
}

您可以在下面的小提琴上看到一个工作示例：http://jsfiddle.net/jTUjT/5/。尝试调整浏览器的大小，并查看对齐是否永远不会失败。
只要CSS element()能被Mozilla -moz-element()以外的其他浏览器支持，你就能创造出很棒的效果。

使用大小适合内容的空元素作为背景，并将内容放置在模糊的元素上。

#dialog_base{
  background:white;
  background:rgba(255,255,255,0.8);

  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 50;
  margin-left: -200px;
  height: 200px;
  width: 400px;

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

#dialog_content{
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left -200px;
  overflow: hidden;
  z-index: 51;
}

背景元素可以在内容元素的内部，但不能反过来。

<div id='dialog_base'></div>
<div id='dialog_content'>
    Some Content
    <!-- Alternatively with z-index: <div id='dialog_base'></div> -->
</div>

如果内容的大小不总是一致的话，这就不容易了，但是它是有效的。

你希望它以哪种方式动态化？如果你希望弹出窗口成功Map到背景，你需要创建两个背景。它需要使用element()或-moz-element()和一个过滤器（对于Firefox，使用一个SVG过滤器，如filter: url(#svgBlur)，因为Firefox还不支持-moz-filter: blur()？）。它只在Firefox中工作。

• • 一个

我仍然需要创建一个简单的演示来展示它是如何做到的。欢迎您查看源代码。

一行代码-

backdrop-filter: blur(5px);