Question

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

然而，从它的外观来看，它只适用于模糊图像。我正在看模糊div，所以当div放在图像上时，div的背景将是图像的那一部分模糊..如果这是有意义的。

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

修改

我创建了一个CodePen，当你看到它时会出现一些问题，首先，div背后的背景实际上并没有模糊。其次，当它们看起来更加坚固时，div的边缘会模糊不清。

//

Answer 1

这是一个古老的问题，但是我在寻找相同问题的答案后遇到了它。 backdrop-filter属性现在具有相当广泛的浏览器支持，并且达到了我认为OP所追求的目标。所以添加一个像

的类

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

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

Answer 2

我建议使用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>

Answer 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。

将高斯模糊应用于Div

3 个答案: