使用 CSS 进行背景模糊

问题描述

我希望在我的网站上的弹出窗口上具有 Vista/7-aero-glass-style 效果，并且它需要是动态的.只要网站在所有现代浏览器上仍然正常工作，我就可以接受这不是跨浏览器效果.

I want an Vista/7-aero-glass-style effect on a popup on my site, and it needs to be dynamic. I'm fine with this not being a cross-browser effect as long as the site still works on all modern browsers.

我的第一次尝试是使用类似的东西

My first attempt was to use something like

#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 来模糊半透明元素的背景而不是其内容?

However, as I should have expected, this resulted in the content of the dialog being blurred and the background staying clear. Is there any way to use CSS to blur the background of a semitransparent element instead of its contents?

推荐答案

OCT.2016 年更新

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

Since the -moz-element() property doesn't seem to be widely supported by other browsers except to FF, there's an even easier technique to apply blurring without affecting the contents of the container. The use of pseudoelements is ideal in this case in combination with svg blur filter.

使用伪元素查看演示

(演示在 FF v49、Chrome v53、Opera 40 中进行了测试 - IE 似乎不支持使用 css 或 svg 过滤器进行模糊)

(到目前为止)在没有 js 插件的情况下在后台产生模糊效果的唯一方法是使用 -moz-element() 属性与 svg模糊过滤器.使用 -moz-element() 您可以将一个元素定义为另一个元素的背景图像.然后应用 svg 模糊滤镜.可选:如果您的背景位于 fixed 位置，您可以使用一些 jQuery 进行滚动.