如何在 html 元素后面添加模糊？答案

【问题标题】：How do I add a blur BEHIND an html element?如何在 html 元素后面添加模糊？
【发布时间】：2017-12-22 22:45:47
【问题描述】：

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

即将推出的 CSS 属性 backdrop-filter，目前仅在 Safari 和 Chrome 开发人员标志后面受支持。正是我需要的，但它需要更好的支持。
JavaScript 库 Blur.js，似乎已经从 Internet 上消失了。（甚至官方网站都指向 GoDaddy 页面。）这可能是一个解决方案，但我不确定该项目发生了什么。
JavaScript 库 StackBlur，这似乎是一个出色的模糊解决方案，但我完全不知道如何使用它来模糊 BEHIND 元素。

有什么想法吗？也许有人使用 StackBlur 来做到这一点并且有一个我可以戳穿的 CodePen 之类的？基本上，我有一个元素网格，每个元素都使用 jQuery UI Draggable，我想让它变得半透明，每个元素后面都有一个很好的模糊。拖动元素时，模糊需要按预期更新。

最后一个想法。现在我使用的是纯 CSS“解决方案”，但它有一些令人讨厌的限制。如果您要建议仅使用 CSS 的解决方案，那可能就是我已经在做的事情了。它的问题如下：

除非我在所有搜索中遗漏了一些巨大的东西，否则我认为我将需要 JS 来完成这个。

【问题讨论】：

如果您需要帮助修复您的 CSS 解决方案，您需要发布您尝试过的内容。对这个问题的任何其他解释都会使其偏离 SO。
我不希望我的 CSS 解决方案得到帮助——我想要一个完全不同的解决方案。我想说的是，如果有人打算建议我可能已经尝试过的纯 CSS 解决方案，我正在寻找替代方案。如何更改问题的措辞以更好地反映这一点？
问题不在于措辞，而在于问题本身。 SO 不是为了让其他人为您设计解决方案或编写代码。您应该自己尝试一下，如果您无法使其正常工作，我们将帮助您修复它。但是如果你不发布任何代码，它很可能不适合这里。
这很不幸，因为我不知道如何完成我想做的事情。
我不是 CSS 专家，但似乎 z-index 应该是解决方案的重要组成部分。对背景使用现有的模糊方法，然后为非模糊部分赋予更高的 z-index，使其显示在模糊部分的前面。

【解决方案1】：

巴尔玛是正确的。给两个对象相同的absolute 位置。模糊一个对象并为其分配较低的z-index。 Bob 是你的叔叔。

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

【讨论】：