本地图片不显示主因是file://协议限制或路径错误；浏览器以HTML文件位置为基准解析background-image相对路径，须用url()函数包裹，配合background-size等属性，并启动本地HTTP服务（如python -m http.server）才能正常加载。
背景图片路径写错导致 404 或空白
本地图片不显示，八成是路径问题。浏览器加载 background-image 时按 HTML 文件所在位置为基准解析相对路径，不是按 CSS 文件位置。比如 HTML 在 /project/index.html，CSS 在 /project/css/style.css，而图片在 /project/images/bg.jpg，那么在 CSS 中必须写 url(../images/bg.jpg)，不能写 url(images/bg.jpg)（这会去找 /project/css/images/bg.jpg）。
验证方法：右键网页 → “检查” → 切到 Network 标签页，刷新后看是否有 bg.jpg 显示 404；或者直接把图片路径粘贴到浏览器地址栏，看能否打开。
- 优先用相对路径，避免硬编码盘符或绝对 URL
- 路径中不要有中文、空格或特殊符号，否则可能被 URL 编码破坏
- 大小写敏感：Linux/macOS 下
Bg.jpg和bg.jpg是不同文件
CSS 中 background-image 的正确写法
必须用 url() 函数包裹路径，且引号可选但建议加上，防止路径含括号、空格时报错。单引号、双引号、不加引号都合法，但统一用单引号最稳妥。
body {
background-image: url('../images/background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
注意：background-image 单独设不会自动拉伸铺满，必须配合 background-size（常用 cover 或 contain）和 background-repeat（通常设为 no-repeat）。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 不要写成
background-image: '../images/bg.jpg'（漏掉url()） - 不要在路径里写
file:///前缀——本地双击打开 HTML 时可能临时生效，但一旦走 HTTP 服务（如python -m http.server）就会跨协议失败 - 如果图片在同级目录，路径就是
url('bg.jpg')；在子目录，比如assets/bg.jpg，就写url('assets/bg.jpg')
HTML 内联 style 加背景图的坑
虽然可以用 style="background-image: url(...)..." 直接写在标签上，但路径解析规则不变，仍以 HTML 文件位置为准。而且内联样式难维护、无法复用、不利于响应式控制。
<div style="background-image: url('images/hero-bg.png');
background-size: cover;
height: 300px;">
内容
</div>
- 内联写法中，
url()里的路径不能用./开头（部分旧浏览器不识别） - 如果 HTML 是通过
file://协议双击打开，Chrome 等现代浏览器默认禁止读取本地file://资源作为背景图（报Not allowed to load local resource），必须起一个本地服务器 - 响应式切换背景图几乎无法实现，建议一律用外部 CSS + 媒体查询
本地开发时图片不加载的真正原因：file:// 协议限制
双击打开 HTML 文件时，浏览器地址栏显示 file:///xxx/index.html，此时所有 background-image 的本地路径都会被当作跨源资源拦截，控制台报错：Not allowed to load local resource。这不是路径写错了，是浏览器安全策略。
解决办法只有一个：启动一个最小本地 HTTP 服务。
- Python 3：终端进入项目根目录，运行
python -m http.server 8000，然后访问http://localhost:8000/index.html - Node.js 用户可装
serve：npx serve -s - VS Code 安装 Live Server 插件，右键 HTML 文件点 “Open with Live Server”
没有服务器，再对的路径也白搭。这点最容易被忽略，也是新手卡住最久的地方。
