我看到挺多人导航都是默认的那种颜色，没有透明度，我自己感觉导航和页脚背景有一定的透明好看点，我先说一下透明度怎么搞，因为背景模糊效果的前提是先背景透明。

1. 头部导航透明:
   打开主题配置文件_config.yml, 找到主题颜色哪里，也就是color_scheme.common.headerMenuBackgroundColor, 这个headerMenuBackgroundColor就是设置头部导航的值，我们将它设置为rgba(66, 185, 133, 0.8), 此时我们头部就是绿色透明的了，0.8就是透明度，数值越小越透明，0.8前面的三个值就是rgb颜色值。会css的应该知道的哦

2. 底部页脚透明：
   同样我们找到color_scheme.footer.background, 将background的值同样改为rgba(66, 185, 133, 0.8), 这个时候页脚也变透明了。

3. 头部导航和页脚高斯模糊
   其实很简单，一行代码搞定
   首先我们需要在source文件夹下创建custom/menu.css文件，内容如下

   1 2 3 4 5

   #navHeader, #j-fish-skip, .footer { backdrop-filter: saturate(120%) blur(5px); }

   就是设置这个backdrop-filter属性就行了，这个属性具体可以百度。

然后将创建好的css导入进去:
找到主题配置文件_config.yml中的import，将css导进去：

1
2
3

import:
  link:
    - <link href="/custom/menu.css" rel="stylesheet">

上面的source文件夹和主题themes文件夹同级，也就是最外面(根目录下)的那个source文件夹，不是主题里的，这样就不会动源码。
至此，头部导航和页脚的模糊效果就完成了，效果如图：

模糊效果：

透明效果：

差别不大，看个人喜好