Html 如何使用CSS模糊元素周围的所有内容？

让我们举个例子。如何模糊页眉导航下方页面上的每个元素（页面上应接收焦点的一个选定元素除外）

如果模糊整个内容区域，则聚焦的元素也将模糊-无法取消模糊父对象的子对象的模糊。如果你选择并检查每一个元素，它是否应该模糊并不是最好的方法。此外，元素应该保持在内容区域内，而不是以任何方式转换为HTML

这：

仅使用CSS时应为：

只需使用绝对定位覆盖物将其变暗，并为聚焦元素提供一个具有更高z索引的相对位置是很容易的，但不幸的是，模糊该暗覆盖物不会模糊其背后的内容：

---

您需要查看所悬停内容的容器，并在其中添加一个：not:hover

这是我的密码笔里的：。我刚刚将它转换成CSS而不是SCSS版本，并删除了任何不需要的内容。它可能不是100%的用例，但这是我如何做到的

.project容器：悬停。项目：非：悬停{ //您可能不需要这个溢出，只是以防万一 溢出：隐藏； } //这条规则基本上是说，当你在容器上悬停时，如果特定的项目不是你要处理的特定项目，则在内容上添加模糊。 .project容器：悬停。项目：非：悬停。项目内容{ //所有的模糊 -webkit过滤器：blur5px； -moz过滤器：blur5px； -o型过滤器：5px； -ms过滤器：blur5px； 过滤器：URLFLUR； 过滤器：blur5px； 过滤器：progid:DXImageTransform.Microsoft.BlurPixelRadius='3'灰度100%； } 背景过滤器解决了这个问题，谢谢@Sheraff和@epascarello 23

---

大多数情况下，人们会在元素周围添加元素并对其应用过滤器，或者添加一个过滤器并改变z索引。另一种选择是遍历树，不应用模糊来添加父级，只将其应用于其他分支和同级。使用背景过滤器以巨大的遮罩div模糊所有内容，使用z索引将要保存的任何内容提升到掩码上方..highlight:：before{内容：；位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；背景过滤器：blur2px；我想有些人喜欢在没有明显原因的情况下给问题打-1分？这也适用于聚焦元素而不是悬停元素，我想是吧？可能吧。不过，我从来没有尝试过：聚焦。这个想法很简单如果有一天像这样使用它，细节：has>summary:focus{/*从模糊中排除这个元素*/}但是，我喜欢你的想法，也许会重新思考我的概念。。。