浏览器禁用 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") 反而会错。
LANUX V1.0 蓝脑商务网站系统 适用于网店、公司宣传自己的品牌和产品。 系统在代码、页面方面设计简约，浏览和后台管理操作效率高。 此版本带可见即可得的html编辑器, 方便直观添加和编辑要发布的内容。 安装： 1.解压后，更换logo、分类名称、幻灯片的图片及名称和链接、联系我们等等页面。 2.将dbconfig.php里面的数据库配置更改为你的mysql数据库配置 3.将整个文件夹上传至
- 路径中不要带空格或中文，浏览器兼容性差，容易静默失败
- 推荐用
.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 根本没加载进来。
