对 Div 应用高斯模糊答案

【问题标题】：Apply Gaussian Blur to Div对 Div 应用高斯模糊
【发布时间】：2016-09-23 01:58:53
【问题描述】：

我遇到了一个名为 StackBlur 的库/插件，它似乎是在浏览器中实现高斯模糊的最知名或最广泛使用的工具。

但从外观上看，它仅适用于模糊图像。我只考虑模糊一个 div，这样当 div 覆盖在图像上时，div 的背景将是图像模糊的那部分......如果这有意义的话。

所以问题是，这可能吗？如果可能，最广泛使用和浏览器友好的方式和/或工具是什么？

编辑

我创建了一个CodePen，当您查看它时，存在一些问题，首先，div 背后的背景实际上并没有模糊。其次，当 div 看起来更立体时，它们的边缘会变得模糊。

//

【问题讨论】：

标签： javascript jquery css blur gaussian

【解决方案1】：

我会推荐使用SVG-filters:

.filtered {
  -webkit-filter: url(#f1);
  filter: url(#f1);
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
  <defs>
    <filter id="f1">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
  </defs>
</svg>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="filtered">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>

【讨论】：

为了兼容性，你应该添加filter: blur(3px)和filter: progid:DXImageTransform.Microsoft.Blur(Strength=3);

【解决方案2】：

这是一个有点老的问题，但我是在寻找同一问题的答案后才发现的。 backdrop-filter 属性现在拥有相当广泛的浏览器支持，它实现了我认为 OP 所追求的目标。所以添加一个类

.background-blur {
    backdrop-filter: blur(5px);
}

应该可以解决问题。在MDN docs 中阅读有关该属性的更多信息。

【讨论】：

【解决方案3】：

看看CSS3 filters:CSS3 filter Property

有了它，您可以通过对它们应用模糊类来blur 任何东西：

<style>
.blurThreePX {
    -webkit-filter: blur(3px); /* Chrome, Safari, Opera */
    filter: blur(3px);
}
</style>
<div class="blurThreePX">Hello world</div>

编辑 1

这个小提琴展示了如何用模糊效果重叠背景图像：

jsFiddle

请注意，这确实需要特殊的 HTML 层次结构和一些 JavaScript。

【讨论】：

如果你看看我在这里创建的这支笔：codepen.io/Tiwaz89/pen/YWKNWQ 你会发现问题是 1) 实际 div 背后的背景不会变得模糊。并且 2) div 的边缘是模糊的，而它们应该看起来更立体。