Hexo框架(十七)：更换博客背景图片及图片压缩 |
您所在的位置：网站首页 › keep怎么改背景图片 › Hexo框架(十七)：更换博客背景图片及图片压缩 |
Hexo框架(十七)：更换博客背景图片及图片压缩
|
博客背景我也是很早之前就配置过了，不过之前一直觉得博客加载很慢，中途有段时间又去掉了背景图片，包括动态背景什么的都去掉了，毕竟加载速度实在太影响使用体验了。最近检查了一下，发现是因为图片资源的原因导致加载速度太慢，这里简要记录一下。 更换背景图片这个我也说过很多次了，我是用数据文件的方式进行配置，详情参考我之前的文章。 在source/_data/style.styl文件中添加： 123456789// 背景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文件中添加代码： 1234567891011121314//侧边框的透明度设置.sidebar-inner { background: rgba(255,255,255,0.8);}//菜单栏的透明度设置.header-inner { background: rgba(255,255,255,0.8);}//搜索框（local-search）的透明度设置.popup { opacity: 0.8;}这样就好啦！ 压缩图片图片资源真的是在是太影响加载速度了，不过把图片压缩就好啦，别看我这么大一张背景图，其实只有 7kb 大小。加载起来就很快啊！
方法也很简单啊，图片格式我们使用 webp，不建议使用 png 或者 jpg。 我们只需要简单转换一下就好啦，你可以点击 这里 来进行转换。 注意哦：webp 图片存在兼容性问题哦，详情：图片自适应 webp 格式 |
【本文地址】
今日新闻 |
推荐新闻 |