next主题添加背景，并设置页面透明度

---

title: hexo添加背景，并设置页面透明度
date: 2020-06-28 17:33
tags:

• hexo
• next
  categories:
• hexo
• next

---

next主题添加背景，并设置透明度

一路上磕磕碰碰终于修成正果

• 这可是真心痛苦，看别人都是在 custom.styl 修改，我左找又找，实在是找不到，在我即将绝望之时，终于看到了大佬的一篇博客，但是这并不是结束，才是开始。

• 我们一步步来，其中有我血的教训，我们来到博客的根目录，找到 _config.yml 并打开，按住 ctrl + f 搜索 custom_file_path: 把 style: source/_data/styles.styl 注释取消掉（修改后如下）

  custom_file_path:
    #head: source/_data/head.swig
    #header: source/_data/header.swig
    #sidebar: source/_data/sidebar.swig
    #postMeta: source/_data/post-meta.swig
    #postBodyEnd: source/_data/post-body-end.swig
    #footer: source/_data/footer.swig
    #bodyEnd: source/_data/body-end.swig
    #variable: source/_data/variables.styl
    #mixin: source/_data/mixins.styl
    style: source/_data/styles.styl
  

• 注意了，我们接下来来到博客根目录，发现 source 里面并没有 _data 于是我们自己创建一个，并且在 _data 里面创建一个 styles.styl 一定记得后缀别弄错了，我当初弄了个css的文件，耽误了半天。

• 然后在该文件里面添加如下代码（url里面是图片地址，可以填你图床里的图片地址，也可以填写你博客文件目录下的图片地址）

body {
  background :url(图片地址);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position: 50% 50%;
}

• 但是由于我们文章是不透明的，影响了我们的美观，我们还得修改一下透明度（代码如下，依旧放在styles.styl文件内）

  .content-wrap {
    opacity: 0.9;
  }
  
  .sidebar {
    opacity: 0.9;
  }
  
  .header-inner {
    background: rgba(255,255,255,0.9);
  }
  
  .popup {
    opacity: 0.9;
  }
  

• 这一切都弄完了，我们保存，然后在本地查看一下效果。在博客根目录处打开git bash（这个不会不会不知道吧，除非博客不是你自己弄的），然后输入如下命令。

  hexo clean
  
  hexo g
  
  hexo s
  

  • 然后浏览器里面查看，如果没啥问题就自己部署上去就OK了。