我想在我的网站上弹出的VISTA / 7的Aero玻璃式的效果 ，它需要是动态的。 我很好这不是一个跨浏览器的效果，只要该网站仍然适用于所有现代浏览器。
我第一次尝试使用类似
#dialog_base {
background:white;
background:rgba(255,255,255,0.8);
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}
然而，正如我所料， 这导致被模糊对话框 ，并保持清晰的背景内容 。 有没有办法使用CSS来模糊半透明的元素，而不是它的内容的背景是什么？
倍频程 2016 UPDATE
由于-moz-element()财产似乎并没有得到广泛的其他浏览器除了支持FF，有一个应用，而不会影响容器的内容模糊更容易的技术。 使用pseudoelements的是在这种情况下使用SVG模糊滤镜组合的理想选择。
检查演示使用伪元素
（演示是在FF V49测试，铬V53，歌剧40 - IE似乎不支持模糊或者与CSS或SVG过滤器）
的唯一方法（到目前为止）具有在后台而不JS插件模糊效果的，是利用-moz-element()组合属性与svg模糊过滤器。 与-moz-element()可以定义一个元件在另一元件的一个背景图像。 然后在应用svg模糊滤镜。 可选：您可以利用一些jQuery的滚动，如果你的背景是fixed位置。
见我在这里演示
我明白这是一个相当复杂的解决方案，并仅限于FF（ element()仅适用于Mozilla的在与时刻-moz-element()属性），但至少有许多人一些努力 ，在过去的WebKit浏览器来实现，希望它将实施在未来 。
您可以使用伪元素定位为具有相同的图像作为背景内容的背景，但随着新的CSS3过滤模糊。
：您可以在这里的行动看出来http://codepen.io/jiserra/pen/JzKpx
我做了定制一个选择，但我增加了模糊背景效果。
由于Safari浏览器9.0可以使用背景过滤性能。
HTML
<div>backdrop blur</div>
CSS
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开发者：背景过滤器
我可以用吗
有一个简单的和非常普遍的技术，通过使用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()你可以创造巨大的影响。 看到这个演示使用Mozilla 。
使用尺寸为内容作为背景一个空元素，并在模糊的元素中的内容的位置。
#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>
这是不容易的，如果内容并不总是一致的尺寸，但它的作品。
你可以把它通过iframe的......我做了什么，但我现在唯一的问题是同步这些div滚动的同时...它可怕的方式，因为它就像你加载2个网站，但我发现的唯一途径...你也可以用div的溢流我想工作...
以何种方式，你想它的动态？ 如果你想弹出成功地映射到后台，你需要创建两个背景。 这既需要使用的element()或-moz-element()和过滤器（适用于Firefox，使用SVG滤镜像filter: url(#svgBlur)因为Firefox不支持-moz-filter: blur()尚未？）。 它只是在写作时在Firefox。
观看演示在这里。
我还需要创建一个简单的演示来显示它是如何做的。 欢迎您查看源代码。
