跳到正文

毛玻璃导航栏

Frosted Glass Navbar

初级网页小程序

导航栏固定在页面顶部，背景半透明，页面内容滚到它下面时被模糊地透出来，像隔着一层磨砂玻璃。苹果官网和很多 SaaS 产品都这么做，既不挡内容，又显得轻盈高级。

你可能会说：「网站顶部的导航栏能不能做成苹果官网那种半透明磨砂的效果，往下滚的时候能隐约看到下面的内容？」

效果预览

正在加载演示…

怎么做

  1. 1

    导航栏吸顶

    先让导航栏在滚动时一直停在顶部。用 position: sticky（或 fixed），这样页面内容才会从它下面滚过去——毛玻璃要「透」的就是这些内容。

    查看代码html
    <nav class="glass-nav">
  <a class="glass-nav__logo" href="/">山野</a>
  <a href="/new">新品</a>
  <a href="/bags">背包</a>
  <a href="/gear">装备</a>
</nav>
  2. 2

    半透明背景 + 背景模糊

    关键是两行：背景色必须是半透明的（不透明就什么也透不出来），再用 backdrop-filter 把背后的内容模糊掉。加一点 saturate 让透出来的颜色更鲜亮，底部一条很淡的分隔线让导航栏和内容分开。Safari 需要带 -webkit- 前缀。

    查看代码css
    .glass-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
  3. 3

    深色模式和不支持时的兜底

    深色模式下把背景换成半透明的深色。少数旧浏览器不支持 backdrop-filter，这时半透明背景会让文字压在内容上看不清，所以用 @supports 退回一个几乎不透明的背景。

    查看代码css
    @media (prefers-color-scheme: dark) {
  .glass-nav {
    background: rgba(15, 23, 42, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .glass-nav { background: rgba(255, 255, 255, 0.95); }
}

适合放在哪

适合用

  • 官网、商城、博客的顶部导航栏，内容是图片和色块较多的页面，透出来的效果最好看。
  • 弹窗或抽屉背后的遮罩层，用模糊代替纯黑半透明，显得更柔和。
  • App 风格的底部标签栏，滚动的内容从下面透出来。

不适合用

  • 页面背景是纯白、内容也以文字为主时，透出来的只是模糊的灰字，效果不明显，还可能显脏；直接用纯色导航栏。
  • 导航栏上的文字很小很细时，别把背景透明度调得太低；底下的花哨内容会干扰阅读。
  • 低端安卓机为主的用户群，大面积背景模糊可能让滚动发卡；先在真机上测一下。

让 AI 帮你做

请把【网站的顶部导航栏，如：components/Navbar】改成毛玻璃效果。先阅读导航栏组件和样式写法，确认它现在是否吸顶、背景色写在哪、项目是否有深色模式。要求：导航栏 position: sticky 吸顶；背景改为半透明（浅色约 rgba(255,255,255,0.6)，深色模式用对应的半透明深色），加 backdrop-filter: blur(12~16px) saturate(160%) 并带 -webkit- 前缀；底部加一条很淡的分隔线；用 @supports 给不支持 backdrop-filter 的浏览器退回接近不透明的背景。导航文字的对比度要足够。沿用现有样式写法，不改无关代码。最后说明怎样验证：在图片较多的页面往下滚，导航文字始终清晰。

用到的知识

毛玻璃吸顶透明度深色模式