hexo下NexT的主题背景及框体透明度修改⾸先定位主题⽂件夹next⽬录下的主题配置⽂件
纵横是什么意思.\themes\next\\_l
打开并查找
旅游论文style: source/_data/styles.styl 并将改⾏的注释解除。
在改⾏所描述的⽬录下创建相应的⽂件,即 source/_data/styles.styl 并打开
1.主题背景更改
在styles.styl 中插⼊以下代码
1 2 3 4 5 6 7 8body {
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.header-inner { //菜单栏的调⾊
background: rgba(255,255,255,0.8); }
.popup { //搜索框透明
opacity: 0.8;
6 7 8 9 10 11 12 opacity: 0.8;
}
.main-inner { //整个主体的透明度 opacity: 0.8;
}
根据实际需要更改的透明模块还可以打开⽹页审查元素,定位到详细的模块查找模块的样式并在styles.styl⽂件中插⼊其定义规则。
实际效果: