设置hexo-next背景图片

版本:

Hexo v4.2.0 | Theme – NexT.Gemini v7.7.2

和之前版本的一些不同

hexo next现在使用自定义CSS的办法：
在_config.yml或next.yml主题配置文件中，设置

custom_file_path:
  style: source/_data/styles.styl

然后，将自定义CSS放进/hexo/source/_data/styles.styl文件中即可
注：之前的next版本是放在themes/next/source/css/ _custom/custom.styl中。

添加背景图片

打开styles.styl添加以下代码即可：

body {
    background:url(/images/yourbackground.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}

background:url 为图片路径，也可以直接使用链接。
background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
background-attachment：背景是否随着网页上下滚动而滚动，fixed 为固定
background-size：图片展示大小，这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

透明化博客内容

还是同一个文件，添加以下内容：

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

注意：其中 header-inner 不能使用 opacity 进行配置。因为 header-inner 包含 header.swig 中的所有内容。若使用 opacity 进行配置，子结点会出很多问题。

参考：https://tding.top/archives/761b6f4d.html