hexo下NexT的主题背景及框体透明度修改

首先定位主题文件夹next目录下的主题配置文件
.\themes\next\\_config.yml
打开并查找     
style: source/_data/styles.styl      并将改行的注释解除。
在改行所描述的目录下创建相应的文件，即 source/_data/styles.styl 并打开

1.主题背景更改

在styles.styl 中插入以下代码

1 2 3 4 5 6 7 8

body { background:url(/images/background.jpg); //图片路径，默认 background-repeat: no-repeat; //图片无法铺满时，是否重复及重复方式 background-attachment:fixed; //图片是否跟随滚动 background-size:cover; //覆盖 background-position:center; //图片显示起始位置 }

并前面主题目录下，.\themes\next\source\images 添加图片文件background.jpg作为背景图片

2.文章背景框透明化

因为设置整个主题的透明度会导致字体也跟随变化，十分影响观感，因此经过博主的反复尝试加查找，精准定位到该背景框的样式，修改其颜色即可。 打开根目录下`source/_data/styles.styl` 并插入以下代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//文章背板的颜色rgb .main-inner > .sub-menu, .main-inner > .post-block, .main-inner > .tabs-comment, .main-inner > .comments, .main-inner > .pagination{ background: #f5f5f56b; //此处使用十六进制颜色代码， 也可以使用rgba进行调色， //实际效果为白色透明色底板 rgba的第四参数即为透明度 } body{ //修改主体字体颜色 color: #000; //纯黑 } .posts-expand .post-title-link { //标题颜色 color: #000; //首页文章标题颜色， （默认为灰辨识度不高） } .posts-expand .post-meta-container { //标题下的日期颜色 color: #880000; //此处修改为红色，可自行调用rgb调色 } //侧边框的透明度设置 .sidebar { opacity: 0.85; }

额外透明可选添加代码：

1 2 3 4 5 6 7 8 9 10 11 12

.header-inner { //菜单栏的调色 background: rgba(255,255,255,0.8); } .popup { //搜索框透明 opacity: 0.8; } .main-inner { //整个主体的透明度 opacity: 0.8; }

根据实际需要更改的透明模块还可以打开网页审查元素，定位到详细的模块查找模块的样式并在styles.styl文件中插入其定义规则。

实际效果：