前言

我在进行butterfly主题美化的时候，发现隔壁redefine主题的毛玻璃效果非常好看，如果为了毛玻璃而抛弃butterfly奔向redefine，很多内容要重新配置。因此，我在ai 的帮助下，顺利给butterfly主题也加上了毛玻璃效果。

一、核心实现原理

初始状态：背景无模糊且透明

滚动触发：通过JavaScript监听滚动事件，超过设定阈值后添加模糊效果

视觉优化：使用backdrop-filter实现毛玻璃质感，配合透明度和过渡动画

二、操作步骤

1.按照butterfly教程文档预调整自己的背景和头图（已配好背景请忽视）

在config.yml中，搜索：Website Background，加上自己的背景。

1
2
3
# Website Background
# Can set it to color or image url
background: /img/your_background.XXX

接着搜索index_img，将头图设置为透明，这时我们得到了不论如何滚动都始终保持不动的背景。

1
2
# The banner image of index page
index_img: transparent

可以发现，头图部分似乎有一层黑色透明遮罩，搜索mask，将header和footer都改为false，即可去除遮罩。

1
2
3
4
# Add a mask to the header and footer
mask:
  header: false
  footer: false

在这三步以后，我们就得到了简单干净的图片背景。

2. 创建CSS样式文件

在主题的source/css/目录下新建bg_blur.css（文件名自选），添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 创建毛玻璃覆盖层 */
#web_bg::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background-color: rgba(255, 255, 255, 0);
}

/* 滚动时激活效果 */
body.scrolled #web_bg::after {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.6);
}

/* 适配夜间模式 */
[data-theme="dark"] body.scrolled #web_bg::after {
    background-color: rgba(0, 0, 0, 0.5);
}

/* 保持背景图片可见 */
#web_bg .bg {
    z-index: -2;
}

通过backdrop-filter实现背景模糊，rgba颜色控制透明度，过渡动画时长设为0.5秒。

3. 添加JavaScript控制逻辑

在主题的source/js/目录下新建bg_blur.js（文件名自选），添加以下代码：

1
2
3
4
5
6
7
8
window.addEventListener('scroll', function() {
          const threshold = window.innerHeight * 0.3;
          if(window.scrollY > threshold) {
            document.body.classList.add('scrolled');
          } else {
            document.body.classList.remove('scrolled');
          }
        });

第二行0.3处为模糊的触发距离，可改到0.8及以上以获得更好的效果。

4. 配置调整

在butterfly主题的配置config.yml（_config.butterfly.yml）中，搜索Background effects
加入下面几行代码：

1
2
3
4
5
background: url(/img/bg.jpg)  # 你的背景图片路径
background_settings:
  opacity: 1       # 必须保持1（透明度通过CSS控制）
  position: center
  size: cover

接着，还是在配置文件里面搜索inject
在heads和bottom后面分别加上

1
2
3
4
5
inject:
  head:
     - <link rel="stylesheet" href="/css/bg_blur.css">
  bottom:
     - <script src="/js/bg_blur.js"></script>

文件名记得对应刚刚新建的css和js文件名

总结

以上就是为butterfly主题添加背景随滚动启用毛玻璃效果的全部操作。