使用 CSS 进行背景模糊 [英] Background blur with 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 进行滚动.

The only way (so far) of having a blur effect in the background without js plugins, is the use of -moz-element() property in combination with the svg blur filter. With -moz-element() you can define an element as a background image of another element. Then you apply the svg blur filter. OPTIONAL: You can utilize some jQuery for scrolling if your background is in fixed position.

在这里查看我的演示

我知道这是一个相当复杂的解决方案并且仅限于 FF(element() 目前仅适用于具有 -moz-element() 属性的 Mozilla)但是至少在过去有 一些努力 在 webkit 浏览器中实现并希望它将在未来实施.

I understand it is a quite complicated solution and limited to FF (element() applies only to Mozilla at the moment with -moz-element() property) but at least there's been some effort in the past to implement in webkit browsers and hopefully it will be implemented in the future.

这篇关于使用 CSS 进行背景模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！