hexo next下添加背景图片(random)

老规矩上来先上一个原文链接- -:
Alt text
原文https://www.jianshu.com/p/30bf702f533c

随机图片来源

原文https://source.unsplash.com/

修改背景样式

修改themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:
可以尽情的发挥你的css了

1
2
3
4
5
6
body {
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}

修改不透明度

完成这一步其实背景就会自动更换了,但是会出现一个问题,因为next主题的背景是纯透明的,这样子就造成背景图片的影响看不见文字,这对于博客来说肯定不行。
那么就需要调整背景的不透明度了。同样是修改themes\next\source\css\ _custom\custom.styl文件。在后面添加如下代码

1
2
3
4
5
6
7
.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #fff;
opacity: 0.8;
min-height: 500px;
}

效果

Alt text

-------------本文结束感谢您的阅读-------------