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

更新时间:2023-07-28 04:25:42 阅读: 评论:0

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⽂件中插⼊其定义规则。
实际效果:

本文发布于:2023-07-28 04:25:42,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1099490.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:透明   透明度   主题   模块   背景   定位   查找
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图