Hexo中next主题自动变化图片

Next主题自动更换背景图片


图片来源是

1
https://source.unsplash.com/

修改背景样式

修改themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:
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%;
}
1
2
3
repeat:重复出现
attachment:滚动效果
position:调整图片的位置

修改不透明度

调整背景的不透明度了。同样是修改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;
}
1
2
background: #fff; 白色
opacity: 0.8;不透明度

热评文章