Next主题背景个性化DIY

抽空整理了一下博客，可能是看惯了灰白色背景的单调，于是想加个BGI（BackGroundImage，背景音乐叫BGM，背景图片我姑且就叫BGI了）调整一下视觉感官，而且最终这个BGI是动态变化的，每次刷新都会更新一张图，如果你也有这样的想法，那么本文适合你。

一个图片网站

首先，分享一个非常nice的图片网站，感觉这个国外的图片社区网站真的秒杀一众图片网站啊，不仅图片质量高，免费，而且还提供了随机拉取图片的服务API，太赞，对于想实现动态背景，简直是福音-site链接。

添加背景图片

修改themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码：

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

url括号中直接添加图片的地址链接，也可以置换成你所喜欢的任意图片。repeat、attachment、position就是调整图片的位置，不重复出现、不滚动等等。

修改博客主体样式

如果按照上一步添加完图片之后，发现出现了另外一个大问题，整个博客背景都是透明的，只能看见图片，看不清文章文字，这样绝对不行的，办法如下，照例在上面的文件下面继续追加如下代码：

.main-inner { 
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
    min-height: 500px;
}

这部分就是修改文章部分div的样式，尤其是background这个属性就是用来调整文章的背景色的，这里设置成了白色，便不会再透明了，如果有css基础自己可以调整其他的属性。这样再次生成博客文件之后，就能出现目前的效果了,这样文章感觉如同悬浮在图片之上，还是有一分美感的。如下：

-EOF-