javascript - 将高斯模糊应用到 Div

Question

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

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

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

编辑

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

//

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