使用 CSS 进行背景模糊答案

【问题标题】：Background blur with CSS使用 CSS 进行背景模糊
【发布时间】：2013-01-28 15:37:52
【问题描述】：

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

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

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

【问题讨论】：

如果您还没有访问过this website
@Morpheus 我不明白这对我有什么帮助。

标签： css popup aero-glass

【解决方案1】：

十月。 2016 年更新

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

Check the demo using pseudo-element

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

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

See my demo here

我知道这是一个相当复杂的解决方案，并且仅限于 FF（element() 目前仅适用于具有 -moz-element() 属性的 Mozilla），但至少在过去有 some effort 在 webkit 浏览器中实现，并希望它将被实施in the future。

【讨论】：

我刚刚在 Chrome 中尝试过，它似乎对我有用。
我发现的唯一真正的跨浏览器模糊是 Stackblur：quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
@Imperative 这真的很酷，但它如何与我的设置一起使用？
@Supuhstar 我必须更多地了解您的设置。这种模糊是使用 HTML5 的 canvas 元素。最近，我只是让 Compass 处理跨浏览器 CSS - compass-style.org/reference/compass/css3/filter
@supuhstar 我的错，直到我输入之后我才意识到你是 OP。我将更新我 2013 年的评论并建议您查看 blurjs.com

【解决方案2】：

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

HTML

<div>backdrop blur</div>

CSS

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

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

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

演示：JSFiddle

文档：Mozilla Developer: backdrop-filter

是给我的吗？：CanIUse

【讨论】：

这是理想的答案！等不及所有常青浏览器都有这个了：D
JSFiddle 似乎无法在 Safari 10.1.2 中运行。

【解决方案3】：

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

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

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

【讨论】：

很有希望，但效果不如预期：codepen.io/anon/pen/bmxad
当然，您必须进行一些修改。如果移动div，则必须移动div的背景位置：codepen.io/jiserra/pen/JzKpx
当背景内容是文本时这是否有效？这将用于图像很少的网站上的弹出对话框。
具体的CSS规则是-webkit-filter: blur(4px); -moz-过滤器：模糊（4px）；过滤器：模糊（4px）；
奇怪的是，当使用普通 div 而不是 content: '' 时，您使用的 hack 似乎不起作用

【解决方案4】：

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

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

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

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

如果除了 Mozilla 的 -moz-element() 之外的其他浏览器只支持 CSS element()，您可以创建出色的效果。看到这个demo with Mozilla。

【讨论】：

问题是当对话框后面有动态文本内容时，这不起作用。我知道这个技巧，正如我在e926.net 上看到的那样
还有一种实验性的方法可以模糊对话框后面的所有内容，但它仅适用于具有 -moz-element() 属性的 mozilla。基本上，您将一个元素定义为另一个元素的背景。然后你可以使用 svg feGaussianBlur 滤镜来模糊背景填充。您可以看到我制作的现场演示：jsfiddle.net/2VzgL。但是，element() 属性仅在 mozilla 中可用，尚无其他浏览器支持。我对跨浏览器兼容性的提示是使用 js 库并根据需要自定义它们，例如 Pixastic。
看起来很有希望，但您的 jsFiddle 在滚动时的行为无法预测
之前的 jsFiddle 只是 -moz-element() 属性的一个例子。要在滚动时按预期运行，它需要稍微不同的实现和一些 jQuery 的使用。看看这里：jsfiddle.net/YgHA8/1
是的，但你可以在没有 JavaScript 的情况下制作网页。

【解决方案5】：

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

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

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

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

在你的回答中说“这是一种糟糕的方式”意味着可能有一个更简单的方法。

【解决方案7】：

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

See demo here.

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

【讨论】：