文章目录
- 操作步骤
- 添加背景图片
- 设置透明
- 边框圆角
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/

















