HTML模板设置背景图片后本地运行消失 如何为各页面配置背景图

背景图本地运行消失90%以上都是资源路径配置错误导致，按照以下步骤操作即可正常显示：

1. 先统一项目文件结构 #

首先整理资源存放路径，给一个通用的标准项目结构参考，所有背景图都统一放到assets/images目录下：

项目根目录/
├── index.html
├── about.html
├── 其他页面.html
└── assets/
    ├── images/
    │   └── 所有背景图都存在这
    └── css/
        └── 公共样式文件style.css

部署localhost本地服务时，必须将项目根目录作为服务的启动目录，不要单独打开子文件夹作为服务根目录。

2. 两种背景图设置方法 #

方法1：CSS全局配置（推荐，多页面共用更方便） #

把背景样式写到公共CSS文件里，所有HTML页面都引入这份CSS即可，路径用相对于CSS文件的相对路径：
在style.css中添加如下代码：

body {
  /* 这里的../是从css目录回退到assets目录，再进入images目录找图 */
  background-image: url("../images/你的背景图文件名.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
}

每个HTML页面的head标签内都引入这个公共CSS：

<link rel="stylesheet" href="./assets/css/style.css">

方法2：单页面单独配置不同背景 #

如果不同页面需要用不同的背景图，可以直接在对应HTML页面的head标签内加内联样式，路径用相对于当前HTML文件的相对路径：
比如根目录下的index.html可以这么写：

<head>
  <style>
    body {
      background-image: url("./assets/images/index专属背景图.jpg");
      /* 其他背景属性按需添加即可 */
    }
  </style>
</head>

如果是存放在子目录里的页面，比如page/contact.html，路径就改成../assets/images/contact专属背景图.jpg即可。

3. 避坑检查项 #

• 不要使用本地绝对路径，比如C:\Users\用户名\图片\bg.jpg这种格式，部署到服务上完全无法识别
• 注意文件名大小写，很多本地服务对大小写敏感，Bg.jpg和bg.jpg会被识别成两个不同的文件
• 修改配置后先清理浏览器缓存再刷新，旧的CSS缓存可能会导致样式不生效
• 按F12打开浏览器控制台的网络面板，查找有没有返回404的图片请求，核对请求路径和实际文件路径是否匹配

内容的提问来源于stack exchange，提问作者Avani Di