如何添加模糊BEHIND一个HTML元素？

Question

我已经在互联网上挖掘并发现了一些似乎正朝着正确方向发展的事情，但似乎没有什么是完整的解决方案。这是我发现的：

• 即将推出的CSS属性backdrop-filter，目前仅在Safari中支持，并且在Chrome开发者标志后面。正是我需要的，但需要更好的支持。
• JavaScript库Blur.js，似乎已经从互联网上消失了。 （甚至官方网站也会出现GoDaddy页面。）这可能是一个解决方案，但我不确定该项目发生了什么。
• JavaScript库StackBlur，它似乎是一个出色的模糊解决方案，但我没有丝毫想到如何使用它来模糊元素。

有什么想法吗？也许有人使用StackBlur来做这个并且有一个CodePen我可以通过什么？基本上，我有一个元素网格，每个元素都使用jQuery UI Draggable，我想让它们半透明，每个背后都有一个漂亮的模糊。当拖动元素时，模糊需要按预期更新。

最后一个想法。现在我正在使用的是纯CSS“解决方案”，但它有一些恼人的限制。如果你打算用CSS建议一个解决方案，那可能就是我现在正在做的事情。它的问题如下：

• 元素背后的区域并不是真正模糊，只是一个任意的背景图像。
• 边缘或模糊区域不能干净地切除模糊。这有点难以描述，但当我说它看起来不太好时，请相信我。

除非我在所有搜索中遗漏了一些巨大的内容，否则我认为我将需要JS。

Answer 1

巴马是正确的。给两个对象absolute位置相同。模糊一个对象并为其指定较低的z-index。鲍勃是你的叔叔。

如果您需要更清晰的细节，请按照SO指南发布您的代码。