全局背景透明渐变 {#全局背景透明渐变}

|---------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 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) } |

操作方法 {#操作方法}

自己在主题文件里的 source\css 文件夹里新建一个 css 文件，命名随意，例如：custom.css
最后在主题的配置文件_config.butterfly.yml里找到 inject 配置项，引用刚刚新建的 custom.css 文件即可

|---------------|------------------------------------------------------------------------| | 1 2 3 | inject: head: - <link rel="stylesheet" href="/css/custom.css"> |