CSS背景模糊

Question

我希望网站上的弹出窗口具有 Vista/7航空玻璃风格的效果，并且它必须是动态的。我很好这不是一个跨浏览器的效果，只要该网站仍然 _适用_于所有现代浏览器。

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

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

Answer 1

由于-moz-element()除FF以外，其他浏览器似乎未广泛支持该属性，因此存在一种更简单的技术来应用模糊处理而不影响容器的内容。在这种情况下，伪元素的使用与svg模糊过滤器结合使用非常理想。

（Demo已在FF v49，Chrome v53，Opera 40中进行了测试-IE似乎不支持使用CSS或SVG滤镜进行模糊处理）

在没有js插件的情况下，在背景中具有模糊效果的唯一方法（到目前为止）是将-moz-element()属性与svg模糊滤镜结合使用。使用-moz-element()可以将一个元素定义为另一个元素的背景图像。然后，您应用svg模糊滤镜。可选：如果背景合适，则可以使用一些jQuery进行滚动fixed。

我明白这是一个相当复杂的解决方案，并仅限于FF（element()仅适用于Mozilla的在与时刻-moz- element()财产），但至少有许多人一些努力，在过去的WebKit浏览器来实现，并希望这将实现在未来。