Next主题添加背景图片

hexo 和 Next 的版本如下：

hexo: 5.2.0

NexT: 7.8.0

---

操作步骤

• 进入 themes\next\source\css 目录中
• 打开 main.styl 文件
• 在末尾添加 css 代码即可

---

添加背景图片

值得注意的是，在 main.styl 文件末尾写的 css 样式，会覆盖主题之前的样式。

以 body 为例，我们要先找到该标签之前的样式，复制下来，然后再此基础上进行修改。先打开自己的博客，按下 F12 检测网页，找到 body 标签。

在右侧样式预览中找到 body 标签对应的样式，点击右上角的 main.css:xxx 查看源码，将 body 标签对应的样式全部复制到

将 body 标签对应的样式全部复制到 main.styl 文件末尾

然后修改至代码如下：背景图片位于 themes\next\source\images 路径下

body {
  background: url(/images/background.jpg);  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
  color: var(--text-color);
  font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 1em;
  line-height: 2;
}

---

设置透明

单单设置了背景图片还不是很完美，我们给所有的栏目设置一个小小的透明，会显得效果很好。

同样我们要找到对应标签的源样式，再其基础上进行修改，如果你的 Next 主题版本和我相同，则可以直接复制我的。

// 侧边标题栏
.header-inner {
  opacity: 0.85;
}

// 侧边头像栏
.sidebar{
  transition-duration: 0.4s;  
  opacity: 0.85;  // 透明度
}

// 中心文章栏
.content {
  padding-top: 15px;
  opacity: 0.9;
}

---

边框圆角

边框圆角看个人喜好，有的人喜欢方方正正的，有些则喜欢圆润点。在这里我给出了将侧边栏和中心文章栏的边框设置为圆角的方法，供大家参考

和之前一样，需要将源样式复制下来，如果你的 Next 主题版本和我相同，则可以直接复制我的。

// 侧边标题栏
.header-inner {
  border-radius: 20px 20px 20px 20px; //边框圆角
  opacity: 0.85;
}

// 侧边头像栏
.sidebar{
  transition-duration: 0.4s;  
  opacity: 0.85;  // 透明度
  border-radius: 10px 10px 10px 10px; //边框圆角
}

// 侧边头像框内部
.sidebar-inner {
  background: var(--content-bg-color);
  border-radius: 10px 10px 10px 10px; //边框圆角
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
  box-sizing: border-box;
  color: var(--text-color);
  width: 240px;
  opacity: 0;
}

//第一个文章
.post-block {
  background: var(--content-bg-color);
  border-radius: 10px 10px 10px 10px; //边框圆角
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
  padding: 40px;
}

//之后的所有文章
.post-block + .post-block {
  border-radius: 10px 10px 10px 10px; //边框圆角
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
  margin-top: 12px;
}

感谢阅读！

个人博客：www.tonydon.club/