与CSS的背景迷离 [英] Background blur with CSS

问题描述

我想在我的网站上的弹出式窗口中显示 Vista / 7航空玻璃风格的效果，它需要是动态的。我很高兴这不是一个跨浏览器的效果，只要网站仍然在所有现代浏览器上工作

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?

推荐答案

p> OCT。 2016 UPDATE

由于 -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.

使用伪元素检查演示

Check the demo using pseudo-element

（Demo已在FF v49，Chrome v53，Opera 40 - IE似乎不支持使用css或svg过滤器进行模糊处理）

到目前为止，在没有js插件的情况下具有模糊效果的唯一方法是使用 -moz-element（）属性结合 svg 模糊过滤器。使用 -moz-element（）可以将元素定义为另一个元素的背景图像。然后应用 svg 模糊过滤器。可选：如果您的背景位于固定位置，则可以使用一些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（）仅适用于Mozilla，而 -moz-element code>属性），但至少有过去的一些努力在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屋！