全局背景透明渐变

1
2
3
4
5
6
7
8
9
10
11
#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
    background: var(--light_bg_color)
}

#aside-content .card-widget {
    background: var(--light_bg_color)
}

#web_bg {
    background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1))
}

页脚透明渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#footer {
    background: rgba(255,255,255,.15);
    color: #000;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    backdrop-filter: saturate(100%) blur(5px)
}

#footer::before {
    background: rgba(255,255,255,.15)
}

#footer #footer-wrap {
    color: var(--font-color)
}

#footer #footer-wrap a {
    color: var(--font-color)
}

操作方法

  1. 自己在主题文件里的 source\css 文件夹里新建一个 css 文件，命名随意，例如：custom.css
  2. 最后在主题的配置文件_config.butterfly.yml里找到 inject 配置项，引用刚刚新建的 custom.css 文件即可
    1
    2
    3
    inject:
      head:
        - <link rel="stylesheet" href="/css/custom.css">