51工具盒子-
修改
<BlogRoot>\themes\butterfly\_config.yml，其中background_dark参数为深色模式下的图片地址。|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
1 2 3 4 5|# Website Background (设置网站背景) # can set it to color or image (可設置圖片 或者 顔色) # The formal of image: url(http://xxxxxx.com/xxx.jpg) background: url(<FilePath>) +background_dark: url(<FilePath>)| -
修改
<BlogRoot>\themes\butterfly\source\css\var.styl，在第 36 行左右|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
1 2 3|$web-bg = hexo-config('background') && unquote(hexo-config('background')) +$web-bg-dark = hexo-config('background_dark') && unquote(hexo-config('background_dark')) $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh| -
修改
<BlogRoot>\themes\butterfly\source\css\_mode\darkmode.styl，在第 41 行左右|------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
1 2 3 4 5 6 7 8 9 10|+ #web_bg + background: $web-bg-dark - #web_bg:before, #footer:before, #page-header:before position: absolute width: 100% height: 100% background-color: alpha($dark-black, .7) content: ''|扩展：
若你想像我一样使用四方连续风格图片（即重复图片）且能正常显示 repeat 效果，则继续按照下方更改
-
修改
<BlogRoot>\themes\butterfly\source\css\_global\index.styl，在第 64 行左右|------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
1 2 3 4 5 6 7 8 9 10 11 12|if $web-bg #web_bg - position: fixed + position: absolute //此处可控制背景是否能跟随滑轮滚动，按需选择是否更改 z-index: -999 width: 100% height: 100% background: $web-bg - background-attachment: local - background-position: center - background-size: cover - background-repeat: no-repeat|
参考链接：https://blog.harriswong.top/posts/9d49f75f/
