17、背景图片固定设置

背景图片固定设置

第一步：在fluid主题文件夹下的scripts目录下创建注入器injector.js

// 全屏背景的需要导入这些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>
  <link defer rel="stylesheet" href="${siteRoot}css/backgroundize.css" />
  `
);

第二步：在fluid主题文件夹下的source目录下的js目录下创建backgroundize.js

const bannerContainer = $("#banner");
const viewBg = $("#web_bg");
const bannerMask = $("#banner .mask");
const bg = $(bannerContainer).css("background-image");
$(viewBg).css("background-image", bg);
$(bannerContainer).css("background-image", "url()");
const color = $(bannerMask).css("background-color");
$(bannerMask).css("background-color", `rgba(0,0,0,0)`);
$(viewBg).css("background-color", color);

第三步：在fluid主题文件夹下的source目录下的css目录下创建backgroundize.css

#web_bg {
    position: fixed;
    z-index: -999;
    width: 100%;
    height: 100%;
    background-attachment: local;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-repeat: repeat;
  }

大功告成