如何添加模糊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指南发布您的代码。