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

Question

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

如果您模糊整个内容区域，焦点元素也会模糊（您不能取消模糊 child 或模糊 parent）。如果您 select（并检查）每个元素是否应该模糊，这不是最好的方法。此外，该元素应保留在内容区域内，不得以任何方式进行转换HTML-wise。

这个：

应该变成这样（只有 CSS）：

只需使用绝对定位的叠加层将其变暗并为聚焦元素提供具有更高 z-index 的 relative 位置会很容易，但不幸的是，模糊深色叠加层不会模糊背后的内容：

Answer 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%);
}

Answer 2

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

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

How can I blur everything around an element with CSS?

html

css

blur