本地图片不显示主因是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；或者直接把图片路径粘贴到浏览器地址栏，看能否打开。
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）。
立即学习“前端免费学习笔记（深入）”；
- 不要写成
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”
没有服务器，再对的路径也白搭。这点最容易被忽略，也是新手卡住最久的地方。
