Hugo博客添加背景图片

素履coder

发布于 2023-03-29 10:46:50

1.1K0

发布于 2023-03-29 10:46:50

文章被收录于专栏：素履coder素履coder

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-03-22，如有侵权请联系 cloudcommunity@tencent.com 删除

css