背景一图流效果

效果图

1.创建编写CSS样式文件

在[BlogRoot]\source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 页脚与头图透明 */  
#footer {  
  background: transparent !important;  
}  
#page-header {  
  background: transparent !important;  
}  
  
/* 白天模式遮罩透明 */  
#footer::before {  
  background: transparent !important;  
}  
#page-header::before {  
  background: transparent !important;  
}  
  
/* 夜间模式遮罩透明 */  
[data-theme="dark"] #footer::before {  
  background: transparent !important;  
}  
[data-theme="dark"] #page-header::before {  
  background: transparent !important;  
}

修改主题配置文件

在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法）

1
2
3
inject:  
  head:  
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载

1
2
3
4
5
# The banner image of home page  
index_img:   
  
# Footer Background  
footer_bg: false

可能出现的问题

部分人反映一图流改完了背景图也没了，那大概率是你之前没设置背景图。在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的background配置项设置背景图

1
background: url(https://source.fomal.cc/img/home_bg.webp)