我想在我的网站上弹出一个Vista / 7-aero-glass风格的效果，它需要是动态的。我很好，这不是一个跨浏览器的效果，只要该网站仍然适用于所有现代浏览器。
我的第一个尝试是使用像
#dialog_base {
background:white;
background:rgba(255,255,0.8);
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}
然而，正如我所预期的，这导致对话框的内容模糊，背景保持清晰。有没有什么办法使用CSS模糊的半透明元素的背景，而不是其内容？
解决方法@H_301_10@
OCT。 2016年更新
由于-moz-element()属性似乎没有其他浏览器广泛支持，除了FF，有一个更容易的技术来应用模糊，而不影响容器的内容。在这种情况下结合svg模糊滤波器使用伪元素是理想的。
Check the demo using pseudo-element
(Demo在FF v49，Chrome v53，Opera 40 – IE似乎不支持与css或svg过滤器模糊)
到目前为止，在没有js插件的情况下在背景中具有模糊效果的唯一方法是将-moz-element()属性与svg模糊过滤器结合使用。使用-moz-element()可以将元素定义为另一个元素的背景图像。然后应用svg模糊过滤器。可选：如果您的背景处于固定位置，您可以使用一些jQuery滚动。
我理解这是一个相当复杂的解决方案，并限制为FF(element()只适用于Mozilla的时刻与-moz-element()属性)，但至少有some effort过去在webkit浏览器中实现，希望它会实施in the future。
由于-moz-element()属性似乎没有其他浏览器广泛支持，除了FF，有一个更容易的技术来应用模糊，而不影响容器的内容。在这种情况下结合svg模糊滤波器使用伪元素是理想的。
Check the demo using pseudo-element
(Demo在FF v49，Chrome v53，Opera 40 – IE似乎不支持与css或svg过滤器模糊)
到目前为止，在没有js插件的情况下在背景中具有模糊效果的唯一方法是将-moz-element()属性与svg模糊过滤器结合使用。使用-moz-element()可以将元素定义为另一个元素的背景图像。然后应用svg模糊过滤器。可选：如果您的背景处于固定位置，您可以使用一些jQuery滚动。
我理解这是一个相当复杂的解决方案，并限制为FF(element()只适用于Mozilla的时刻与-moz-element()属性)，但至少有some effort过去在webkit浏览器中实现，希望它会实施in the future。
