1. 背景图片设置

先找到要设置背景图片的地方,如下图,我想设置主页的背景,找到了list标签

然后去css文件夹,在assets/css/extended/blank.css,添加如下标签

.list {
    /* 添加!important表示覆盖默认的设置 */
    background-image: url("") !important;
}

1.1 绝对路径的方式

直接把地址填入即可

.list {
    /* 添加!important表示覆盖默认的设置 */
    background-image: url("https://www.sulvblog.cn/img/aa.png") !important;
}

1.2 相对路径的方式

把图片放到static/img目录下,然后调用图片

.list {
    /* 添加!important表示覆盖默认的设置 */
    background-image: url("../../img/aa.png") !important;
}

解释一下这里为什么是../../,因为静态博客是采用把生成的静态文件发布出去展示的方法,所以要以生成的静态文件路径为准,下图是hugo博客生成的public文件,css文件都在assets/css文件夹内,如果我想在css文件夹内引用img内的图片,需要先跳出来两层目录,才能拿到img文件夹内的图片

下图是展示效果

1.3 日夜变换图片

如果想日夜变换时改变背景图片,只需加上.dark即可:

/* 在前面加上.dark,.dark和.list之间注意空格问题 */
.dark.list {
    background-image: url("../../img/bb.png") !important;
}

展示效果如下

1.4 效果设置

.list {
    background-image: url("../../img/aa.png") !important;
    /* 照片不重复出现 */
    background-repeat: no-repeat;
    /* 照片大小 */
    background-size: 100% 100%;
    /* 右侧滚动时照片固定大小 */
    background-attachment: fixed;
}

.dark.list {
    background-image: url("../../img/bb.png") !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

建议使用较小的图片,不然会影响博客加载速度和流畅性