使用 CSS 进行背景模糊

Background blur with CSS

提问by Supuhstar

I want an Vista/7-aero-glass-style effecton 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 workson all modern browsers.

我希望在我网站上的弹出窗口中具有Vista/7 航空玻璃风格的效果，并且它需要是动态的。只要该站点仍然可以在所有现代浏览器上运行，我就认为这不是跨浏览器的效果。

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);
}

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

然而，正如我所料，这导致对话框的内容变得模糊，背景保持清晰。有没有办法使用 CSS 来模糊半透明元素的背景而不是其内容？

采纳答案by otinanai

OCT. 2016 UPDATE

华侨城 2016年更新

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.

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

Check the demo using pseudo-element

使用伪元素检查演示

(Demo was tested in FF v49, Chrome v53, Opera 40 - IE doesn't seem to support blur either with css or svg filter)

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

---

---

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 svgblur filter. With -moz-element()you can define an element as a background image of another element. Then you apply the svgblur filter. OPTIONAL: You can utilize some jQuery for scrolling if your background is in fixedposition.

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

See my demo here

在这里查看我的演示

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 effortin the past to implement in webkit browsers and hopefully it will be implemented in the future.

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

回答by hovado

In recent versions of major browsers you can use backdrop-filter property.

在最新版本的主要浏览器中，您可以使用背景过滤器属性。

HTML

HTML

<div>backdrop blur</div>

CSS

CSS

div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

or if you need different background color for browsers without support:

或者如果您需要不支持的浏览器的不同背景颜色：

div {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    div {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);  
    }
}

Demo: JSFiddle

演示：JSFiddle

Docs: Mozilla Developer: backdrop-filter

文档：Mozilla 开发人员：background-filter

Is it for me?: CanIUse

适合我吗？：CanIUse

回答by Juan Ignacio Serra

You can use a pseudo-element to position as the background of the content with the same image as the background, but blurred with the new CSS3 filter.

您可以使用伪元素定位与背景相同的图像作为内容的背景，但使用新的 CSS3 过滤器进行模糊处理。

You can see it in action here: http://codepen.io/jiserra/pen/JzKpx

你可以在这里看到它的实际效果：http: //codepen.io/jiserra/pen/JzKpx

I made that for customizing a select, but I added the blur background effect.

我这样做是为了自定义选择，但我添加了模糊背景效果。

回答by otinanai

There is a simple and very common technique by using 2 background images: a crisp and a blurry one. You set the crisp image as a background for the body and the blurry one as a background image for your container. The blurry image must be set to fixed positioning and the alignment is 100% perfect. I used it before and it works.

使用 2 个背景图像有一个简单且非常常见的技术：一个清晰的和一个模糊的。您将清晰的图像设置为主体的背景，将模糊的图像设置为容器的背景图像。模糊图像必须设置为固定定位并且对齐是 100% 完美的。我以前用过它，它有效。

body {
    background: url(yourCrispImage.jpg) no-repeat;
}

#container {
    background: url(yourBlurryImage.jpg) no-repeat fixed;
}

You can see a working example at the following fiddle: http://jsfiddle.net/jTUjT/5/. Try to resize the browser and see that the alignment never fails.

您可以在以下小提琴中看到一个工作示例：http: //jsfiddle.net/jTUjT/5/。尝试调整浏览器的大小，看看对齐永远不会失败。

---

---

If only CSS element()was supported by other browsers other than Mozilla's -moz-element()you could create great effects. See this demo with Mozilla.

如果element()Mozilla 以外的其他浏览器只支持CSS ，-moz-element()您就可以创建出色的效果。用 Mozilla看这个演示。

回答by Devon

Use an empty element sized for the content as the background, and position the content over the blurred element.

使用适合内容大小的空元素作为背景，并将内容放置在模糊元素上。

#dialog_base{
  background:white;
  background:rgba(255,255,255,0.8);

  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 50;
  margin-left: -200px;
  height: 200px;
  width: 400px;

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

#dialog_content{
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left -200px;
  overflow: hidden;
  z-index: 51;
}

The background element can be inside of the content element, but not the other way around.

背景元素可以在内容元素内部，但不能反过来。

<div id='dialog_base'></div>
<div id='dialog_content'>
    Some Content
    <!-- Alternatively with z-index: <div id='dialog_base'></div> -->
</div>

This is not easy if the content is not always consistently sized, but it works.

如果内容的大小并不总是一致，这并不容易，但它确实有效。

回答by Danton Heuer

You could make it through iframes... I made something, but my only problem for now is syncing those divs to scroll simultaneous... its terrible way, because its like you load 2 websites, but the only way I found... you could also work with divs and overflow I guess...

你可以通过 iframe 实现它......我做了一些东西，但我现在唯一的问题是同步这些 div 以同时滚动......它的可怕方式，因为它就像你加载 2 个网站一样，但我发现的唯一方法......你也可以使用 divs 和溢出我猜...

回答by Alan Gresley

In which way do you want it dynamic? If you want the popup to successfully map to the background, you need to create two backgrounds. It requires both the use of element()or -moz-element()and a filter (for Firefox, use a SVG filter like filter: url(#svgBlur)since Firefox does not support -moz-filter: blur()as yet?). It only works in Firefox at the time of writing.

你希望它以哪种方式动态？如果想让弹出框成功映射到背景，则需要创建两个背景。它需要使用element()or-moz-element()和过滤器（对于 Firefox，使用 SVG 过滤器，filter: url(#svgBlur)因为 Firefox 尚不支持-moz-filter: blur()？）。在撰写本文时，它仅适用于 Firefox。

See demo here.

在这里查看演示。

I still need to create a simple demo to show how it is done. You're welcome to view the source.

我仍然需要创建一个简单的演示来展示它是如何完成的。欢迎大家查看源码。