如何在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准则发布您的代码。