Hexo框架(十七)：更换博客背景图片及图片压缩

博客背景我也是很早之前就配置过了，不过之前一直觉得博客加载很慢，中途有段时间又去掉了背景图片，包括动态背景什么的都去掉了，毕竟加载速度实在太影响使用体验了。最近检查了一下，发现是因为图片资源的原因导致加载速度太慢，这里简要记录一下。

更换背景图片

这个我也说过很多次了，我是用数据文件的方式进行配置，详情参考我之前的文章。

在source/_data/style.styl文件中添加：

// 背景
body {
  background-image:url(../images/bg.webp);
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-size:cover;
}

background-image 就是你的背景图啦。

因为懒得去themes/next/source/images 文件夹下添加图片，所以我所有的自定义的图片资源都放在了hexo/source/images文件下，当然啦，本来是没有这个文件夹的，但是我们自己新建一个就好啦！

设置透明度

不设置一点透明度的话，我觉得白色的背景还是很突兀，而且完全看不到背景啊，所以我们继续在source/_data/style.styl文件中添加代码：

//侧边框的透明度设置
.sidebar-inner {
  background: rgba(255,255,255,0.8);
}

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

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.8;
}