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

【问题标题】：How can I blur everything around an element with CSS?如何使用 CSS 模糊元素周围的所有内容？
【发布时间】：2020-10-23 19:02:38
【问题描述】：

我们以this page 为例。除了页面上的一个选定元素（应该获得焦点）之外，如何模糊页面上的每个元素（标题导航下方）？

如果您对整个内容区域进行模糊处理，则焦点元素也会被模糊处理（您不能对模糊父项的子项进行模糊处理）。而且，如果您选择（并检查）每个元素是否应该模糊，这不是最好的方法。此外，该元素应保留在内容区域内，不得以任何方式进行 HTML 转换。

这个：

应该变成这样（仅使用 CSS）：

使用绝对定位的叠加层将其变暗并赋予焦点元素relative 位置和更高的z-index 是很容易的，但不幸的是，模糊该黑暗叠加层并不会模糊其后面的内容：

【问题讨论】：

大多数时候人们会添加元素来包围元素并对其应用过滤器，或者添加一个并更改 z-index。
其他选项是遍历树并且不应用模糊来添加父级，只需将其应用到其他分支和兄弟姐妹。
使用背景过滤器用巨大的遮罩 div 模糊所有内容，使用 z-index 将您想要保存的任何内容提升到遮罩上方。
.highlight::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(2px);
有些人只是喜欢给问题-1 没有明显的原因，我猜？

标签： html css blur

【解决方案1】：

您需要查看您正在悬停的内容的容器并在其中添加一个 :not(:hover)。

这是来自我的一个代码笔：https://codepen.io/amandaIaria/pen/vqdONB。我刚刚把它变成了 CSS 而不是 SCSS 版本，并删除了任何不需要的东西。它可能不是 100% 的用例，但我就是这样做的。

.project-container:hover .project:not(:hover) {
  // You might not need this overflow but just in case
  overflow: hidden;
}

// This rule basically says when you are hovering the container and if the specific project is not the specific one you are hoving add the blur to the content.

.project-container:hover .project:not(:hover) .project__content {
       // All the blurs
        -webkit-filter: blur(5px); 
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px); 
        filter: url(#blur); 
        filter: blur(5px);   
        filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3') grayscale(100%);
}

【讨论】：

我猜这也适用于聚焦（而不是悬停）元素？
可能。不过，我从来没有用 :focus 尝试过。
我们的想法是有一天会像这样使用它details:has(> summary:focus) { /* Exclude this element from blurring */ }
但是，我喜欢你的想法，也许会重新考虑我的概念......

【解决方案2】：

backdrop-filter 解决了这个问题，谢谢@Sheraff 和 @epascarello 23

【讨论】：