🔵Hexo Fluid主题背景固定(ES6改写版)与毛玻璃底页

本文最后更新于:2023年7月28日 凌晨

背景全屏固定

只要新建两个文件就可实现背景固定

注入背景容器

根目录新建scripts文件夹,新建injector.js

1
2
3
const { root: siteRoot = "/" } = hexo.config;
hexo.extend.injector.register("body_begin", `<div id="web_bg"></div>`);
hexo.extend.injector.register("body_end",`<script src="${siteRoot}js/backgroundize.js"></script>`);

背景替换

source/js目录新建backgroundize.js

1
2
3
4
5
6
7
8
9
10
11
document
.querySelector('#web_bg')
.setAttribute('style', `background-image: ${document.querySelector('.banner').style.background.split(' ')[0]};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);

document
.querySelector("#banner")
.setAttribute('style', 'background-image: url()')

document
.querySelector("#banner .mask")
.setAttribute('style', 'background-color:rgba(0,0,0,0)')

毛玻璃

透明背景

_config.fluid.yml修改背景色为透明

1
2
3
4
# 主面板背景色
# Color of main board
board_color: "#ffffff80"
board_color_dark: "#00000080"

毛玻璃滤镜

css文件夹新建cloudedGlass.css

1
2
3
4
#board {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}

_config.fluid.yml引入

1
2
3
4
# 指定自定义 .css 文件路径,用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
- /css/cloudedGlass.css

backdrop-filter兼容性不好,要结合背景图片适当调节背景色使无毛玻璃时也能展示内容


🔵Hexo Fluid主题背景固定(ES6改写版)与毛玻璃底页
https://qingshaner.com/Hexo Fluid主题背景固定(ES6改写版)与毛玻璃底页/
作者
清山
发布于
2022年5月1日
许可协议