title: “Hugo博客添加背景图片” date: 2022-05-05T00:17:58+08:00 lastmod: 2022-05-05T00:17:58+08:00

author: [“Sulv”]

keywords: categories: tags: [建站]

description: ""

weight: slug: "" draft: true # 是否为草稿 comments: true reward: true # 打赏 mermaid: true #是否开启mermaid showToc: true # 显示目录 TocOpen: true # 自动展开目录 hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等 disableShare: true # 底部不显示分享栏 showbreadcrumbs: true #顶部显示路径 cover: image: "" #图片路径例如：posts/tech/123/123.png caption: "" #图片底部描述 alt: "" relative: false

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;
}

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