导航栏毛玻璃

更新时间: 8/31/2025, 1:51:17 PM

Vitepress中文搭建教程
本文转载至：VitePress快速上手中文教程

在theme/style文件夹，然后新建blur.css并填入如下代码

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.mts
│  │  └─ theme
│  │     └─ style
│  │        └─ index.css
│  │        └─ blur.css
│  └─ index.md
└─ node_modules

在主题原始文件中，VPNavBar.vue组件有其对应的属性

复制下面代码，粘贴到blur.css中，可以自行增减

css

/* .vitepress\theme\style\blur.css */
:root {

    /* 首页下滑后导航透明 */
    .VPNavBar:not(.has-sidebar):not(.home.top) {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

    /* 搜索框透明 */
    .DocSearch-Button {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

    /* Feature透明 */
    .VPFeature {
        border: 1px solid transparent;
        box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
        background-color: transparent;
    }

    /* 文档页侧边栏顶部透明 */
    .curtain {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

    @media (min-width: 960px) {

        /* 文档页导航中间透明 */
        .VPNavBar:not(.home.top) .content-body {
            background-color: rgba(255, 255, 255, 0);
            backdrop-filter: blur(10px);
        }
    }

    /* 移动端大纲栏透明 */
    .VPLocalNav {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

}

最后引入index.css 中即可看到效果

css

/* style/index.css */
@import './blur.css';

导航栏毛玻璃 ​

导航栏毛玻璃