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

背景全屏固定

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

注入背景容器

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

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

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修改背景色为透明

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

毛玻璃滤镜

css文件夹新建cloudedGlass.css

#board {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

_config.fluid.yml引入

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

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

参考链接:

《背景固定 (AIGISSS)》