如何实现类似毛玻璃的效果

最近在看nextjs教程时发现网页的头部是毛玻璃效果：

查看元素：

查看源码：

@supports (-webkit-backdrop-filter: blur(1px)) or ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {

  .nextra-nav-container-blur {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);
    background-color: hsla(0,0%,100%,.85);
  }

  :is(html[class~=dark] .nextra-nav-container-blur) {
    background-color: hsla(0,0%,7%,.8)!important
  }
}

直接用AI解释下：

这段代码是CSS代码，主要用于实现一个具有模糊背景效果的导航容器，并且根据不同的主题（暗色模式和亮色模式）调整背景颜色。以下是代码的详细解析：

1. @supports 规则

@supports 是一个CSS条件规则，用于检测浏览器是否支持指定的CSS特性。如果浏览器支持这些特性，那么就会应用其中的样式。

在这段代码中：

@supports (-webkit-backdrop-filter: blur(1px)) or ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)))

它检查浏览器是否支持以下特性之一：

• -webkit-backdrop-filter: blur(1px)（用于支持Webkit内核的浏览器，如Safari）
• backdrop-filter: blur(1px)（标准的CSS属性）

如果浏览器支持这些特性中的任何一个，就会应用大括号 {} 内的样式。

2. .nextra-nav-container-blur 样式

这部分定义了导航容器的样式：

.nextra-nav-container-blur {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  background-color: hsla(0, 0%, 100%, .85);
}

• --tw-backdrop-blur: blur(12px);：定义了一个CSS变量，表示背景模糊的强度为12像素。
• -webkit-backdrop-filter 和 backdrop-filter：应用背景模糊效果。这里使用了CSS变量 var(--tw-backdrop-blur)，并支持其他滤镜效果（如亮度、对比度、灰度等）。
• background-color: hsla(0, 0%, 100%, .85);：设置背景颜色为半透明的白色（85%的透明度）。

3. 暗色模式下的样式

:is(html[class~=dark] .nextra-nav-container-blur) {
  background-color: hsla(0, 0%, 7%, .8)!important;
}

• :is()：是一个CSS伪类，用于选择匹配的元素。这里选择的是 html 元素的 class 属性中包含 dark 的 .nextra-nav-container-blur 元素。
• background-color: hsla(0, 0%, 7%, .8)!important;：在暗色模式下，将背景颜色设置为半透明的深灰色（80%的透明度），并使用 !important 确保优先级最高。

4.backdrop-filter

backdrop-filter 用于对元素的背景应用图形效果（如模糊或颜色偏移）。它类似于 filter 属性，但作用范围是元素的背景，而不是元素本身的内容。换句话说，它可以让元素的背景看起来像是被某种滤镜处理过，而元素的内容（如文字、图片等）则保持不变。

blur() ：背景模糊效果

• 语法：blur(<length>)
• 示例：backdrop-filter: blur(10px);
• 效果：背景内容会被模糊处理，模糊程度由参数 <length> 决定（单位通常是 px）。