Hexo-NexT设置博客背景图片

更新时间:2023-07-28 05:33:19 阅读: 评论:0

Hexo-NexT设置博客背景图⽚
1. 设置背景图⽚
将想要的背景图⽚放⼊ themes/next/source/images。打开 themes/next/source/css/ _custom/custom.styl ⽂件,这个是 Next 故意留给⽤户⾃⼰个性化定制⼀些样式的⽂件,添加以下代码即可。
实际上我的版本⾥没有_custom,通过新建⽬录⽆法实现。我是在 themes/next/source/css/_schemes/Gemini/index.styl 中添加的代码,Gemini是我的 next 的布局样式。
读课文
在写这篇博客的过程中,⼜尝试了下将代码添加到 blog_root/source/_data/styles.style 下,设置成功。如果没有这个⽬录,直接新建即可。蒜苔的做法大全
body {
background:url(/images/yourbackground.jpg);
background-repeat: no-repeat;
background-attachment:fixed; //不重复
background-size: cover;      //填充
background-position:50% 50%;
}
background:url 为图⽚路径,也可以直接使⽤链接。
港行和国行的区别background-repeat:若果背景图⽚不能全屏,那么是否平铺显⽰,充满屏幕
background-attachment:背景是否随着⽹页上下滚动⽽滚动,fixed 为固定
background-size:图⽚展⽰⼤⼩,这⾥设置 100%,100% 的意义为:如果背景图⽚不能全屏,那么是否通过拉伸的⽅式将背景强制拉伸⾄全屏显⽰。
2. 博客内容透明化
NexT 主题的博客⽂章均是不透明的,这样读者就不能好好欣赏背景图⽚了,下⾯的⽅法可以使博客内容透明化:
在 blog_root/source/_data/styles.style 中添加以下内容:
//博客内容透明化
//⽂章内容的透明度设置
.content-wrap {
opacity: 0.9;
}
//侧边框的透明度设置
.sidebar {
5000年历史顺序opacity: 0.9;
}
//菜单栏的透明度设置
.header-inner {
background: rgba(255,255,255,0.9);
}
//搜索框(local-arch)的透明度设置
.popup {阻断药
确信的近义词是什么opacity: 0.9;
}小学口算题
注意:其中 header-inner 不能使⽤ opacity 进⾏配置。因为 header-inner 包含 header.swig 中的所有内容。若使⽤ opacity 进⾏配置,⼦结点会出很多问题。
英语句子种类
3. 参考

本文发布于:2023-07-28 05:33:19,感谢您对本站的认可!

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

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

标签:设置   背景图   全屏   不能   透明度
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图