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;
}

感谢阅读！

个人博客：http://www.tonydon.club/