浏览器禁用 file:// 协议下 background-image 的本地路径加载，因安全策略拦截跨目录请求；应使用相对路径（以 HTML 文件为基准）、避免空格/中文/大小写错误，或改用 data URL 或本地 HTTP 服务。
background-image 用本地路径为什么显示不出来
浏览器出于安全限制，直接用 file:// 协议打开 HTML 文件时，background-image: url("img/logo.png") 很可能加载失败——不是写法错，是浏览器主动拦截了本地文件间的跨目录资源请求。这不是 bug，是默认行为。
常见错误现象：DevTools 控制台报错 Failed to load resource: net::ERR_FILE_NOT_FOUND，但图片明明就在同级 img/ 文件夹里。
- 确保 HTML 和图片在同一个本地目录下（或路径相对正确），比如 HTML 在
project/index.html，图片就得放在project/img/logo.png - 路径必须是相对路径，不能写成
C:\project\img\logo.png或/img/logo.png（后者会被解析为根目录） - 如果用 VS Code 预览插件（如 Live Server），它起的是
http://127.0.0.1:5500服务，这时url("img/logo.png")就能正常工作
CSS 里 background-image 的路径怎么写才可靠
路径是相对于 HTML 文件位置计算的，不是相对于 CSS 文件。哪怕 CSS 是外链的，background-image 的路径依然以 HTML 所在目录为基准。
假设结构是：index.html、style.css、assets/bg.jpg 同在 src/ 目录下：
立即学习“前端免费学习笔记（深入）”；
src/
├── index.html
├── style.css
└── assets/
└── bg.jpg
那么在 style.css 里写 background-image: url("assets/bg.jpg"); 就对了；如果写成 url("../assets/bg.jpg") 反而会错。
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
- 路径中不要带空格或中文，浏览器兼容性差，容易静默失败
- 推荐用
.jpg、.png、.webp，避免.tiff或.heic等不被广泛支持的格式 - 路径区分大小写，
Bg.jpg和bg.jpg在 macOS/Linux 下不是同一个文件
想离线双击打开就生效，有什么绕过方案
没有完美绕过，但有两个务实选择：一个是改用 data URL 内联图片，另一个是本地起一个最小 HTTP 服务。
data URL 把图片转成 Base64 字符串直接塞进 CSS，彻底摆脱路径问题：
div {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==");
}
- 适合小图标（
- 可用在线工具（如 base64.guru）快速转换，别手敲
- VS Code 插件 “Base64 Image” 支持右键一键转，比复制粘贴稳得多
如果图较大或要频繁换图，直接起服务更可持续：终端进项目根目录，运行 python3 -m http.server 8000（Python 3），然后浏览器打开 http://localhost:8000/index.html。
background-image 加载失败时如何快速定位
别只盯着 CSS 是否写对，先确认三件事：图片是否存在、路径是否拼错、浏览器是否在 file:// 协议下运行。
- 把图片路径单独粘贴到浏览器地址栏，比如
file:///Users/name/project/img/bg.jpg，看能否直接打开 - 在 DevTools 的 Network 标签页刷新页面，过滤
Img，看对应请求的状态码是不是200 - 检查元素 computed 样式里
background-image的值是否被解析成了none，说明 CSS 解析出错了（比如引号没闭合、路径含非法字符）
最常被忽略的一点：CSS 文件本身有没有被正确加载？检查 Network 里 style.css 的状态码是不是 200——很多“背景不显示”的问题，根源其实是 CSS 根本没加载进来。
