CSS本地磁盘与GitHub背景图片引用问题求助

一、本地背景图无法显示的修复方案 #

1. 替换绝对路径为相对路径 #

你当前使用的Windows本地绝对路径C:\Programming\Recipe\cooking\baking.jpg不适用于网页环境，必须改用相对路径。假设你的项目目录结构如下：

Programming/
└── Recipe/
    ├── index.html
    ├── style.css
    └── cooking/
        └── baking.jpg

那么style.css中应修改为：

#banner {
  background-image: url('./cooking/baking.jpg'); /* 相对路径，基于style.css所在目录 */
  background-size: cover;
  height: 300px;
  width: 100%;
}

如果style.css放在单独的css文件夹中，路径需调整为url('../cooking/baking.jpg')（../表示返回上一级目录）。

2. 统一路径分隔符 #

网页中必须使用**正斜杠/**作为路径分隔符，Windows系统的反斜杠\无法被浏览器识别，这是导致路径失效的常见原因。

3. 验证文件存在性与大小写 #

确认图片文件确实存在于指定路径下，且文件名、文件夹名与代码中的写法完全一致（Windows不区分大小写，但部署到服务器时会严格区分）。

二、GitHub图片引用的正确方法 #

你使用的raw链接格式错误，正确的GitHub raw图片链接需要将路径中的blob替换为raw，而非添加?raw=true参数。

正确的raw链接格式示例： #

将原链接 https://github.com/dzu1i/cooking/blob/main/baking.jpg 修改为：
https://github.com/dzu1i/cooking/raw/main/baking.jpg

修正后的CSS代码： #

#banner {
  background-image: url('https://github.com/dzu1i/cooking/raw/main/baking.jpg');
  background-size: cover;
  height: 300px;
  width: 100%;
}

额外注意点： #

• 确保你的GitHub仓库为公开状态，私有仓库的raw链接需要权限验证，无法直接在网页中引用。
• 可通过GitHub图片页面的「Raw」按钮直接复制正确的raw链接。

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