hexo添加动态背景

发现

本来想为 hexo 设置背景图片,又不想单调的只有一张图,碰巧发现知乎有个问题:哪里有获取随机图片的服务接口?,因此就准备加到博客里面,这样也好看一些。

注意这张图的地址是api,返回是随机的。

资源整理

免费的 api

如果有兴趣可以右键打开试试呢

CSS 设置

我的主题是Hexo的Next主题,我是在themes\next\layout\_layout.swig的_layout.swig的body上加了个样式bosy-class

然后在themes\next\source\css\main.styl中添加如下样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 媒体查询,屏幕太窄了显示背景图片也无用 */
@media (min-width: 992px){
// body 处理
.body-class{
/* 背景图片的地址 */
background: url(https://api.ixiaowai.cn/gqapi/gqapi.php);
/* 不重复 */
background-repeat: no-repeat;
/* 背景图像的位置固定 */
background-attachment: fixed;
/* 背景居中 */
background-position: 50% 50%;
/* 全部覆盖 如果图片小会拉伸,图片大会压缩*/
background-size: cover;
}
}

接下来就可以看到背景图片的地址每次都会刷新变化了。

你有多久没有爱我了?
kitety 微信 微信
kitety 支付宝 支付宝
欢迎关注我的其它发布渠道