Hexo-NexT设置博客背景图片

NexT主题本身是没有背景图片的,显得有点单调,一个个性化的背景图片,会让博客变得美观不少。

Hexo-NexT主题版本:7.1.2

设置背景图片

将想要的背景图片放入themes/next/source/images。打开themes/next/source/css/ _custom/custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码即可:

1
2
3
4
5
6
7
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%的意义为:如果背景图片不能全屏,那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

博客内容透明化

NexT主题的博客文章均是不透明的,这样读者就不能好好欣赏背景图片了,下面的方法可以使博客内容透明化:

themes/next/source/css/_custom/custom.styl中添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//博客内容透明化
//文章内容的透明度设置
.content-wrap {
opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
background: rgba(255,255,255,0.9);
}

//搜索框(local-search)的透明度设置
.popup {
opacity: 0.9;
}

注意:其中header-inner不能使用opacity进行配置。因为header-inner包含header.swig中的所有内容。若使用opacity进行配置,子结点会出很多问题。

参考

赞赏一杯咖啡
0%