background-image 的 url() 路径基准是 css 文件所在目录而非 html 文件，这是 90% 的 404 根源；需按 css 相对路径规则计算，注意构建工具输出路径、js 动态设置语法、.ico 格式限制及元素尺寸/覆盖问题。
background-image 的 url() 路径基准不是 HTML 文件
这是 90% 的 404 根源。浏览器解析 url("xxx.png") 时，永远以**最终加载的 CSS 文件所在目录**为起点，和 index.html 放在哪完全无关。比如：css/style.css 里写 url("images/bg.jpg")，实际请求的是 css/images/bg.jpg，而不是 images/bg.jpg。
验证方法：打开开发者工具 → Network → 切到 Img 标签页 → 刷新 → 找那个 404 的图片名 → 右键 “Open in new tab”，地址栏显示的完整 URL 就是浏览器真正尝试请求的路径。
- 如果路径明显多了一级或少了一级（比如多了
css/），说明相对路径没算对层级 - 如果路径是
/static/images/xxx.png却报 404，检查 Django 的STATIC_URL或 Spring Boot 的静态资源映射是否生效 - Webpack/Vite 构建后，CSS 被抽到
dist/css/，但图片在dist/img/，此时url("img/xxx.png")必然失败
JavaScript 动态设置 background-image 时语法写错
常见错误是把 url() 当成 JS 函数调用：body.style.backgroundImage = ${url("./img/1.jpg")} —— 这会直接报 ReferenceError: url is not defined，或者生成非法字符串导致 404。
正确写法必须是完整、合法的 CSS 字符串：
body.style.backgroundImage = 'url("./img/1.jpg")';-
body.style.backgroundImage = `url("./img/${id}.jpg")`;（注意：引号包裹整个url(...)，内部路径也需引号） - 路径仍需按 CSS 规则计算：从当前 HTML 文件位置出发找图，不是从
script.js位置
用了 .ico 格式当 background-image
.ico 是 favicon 专用格式，不是通用图像格式。Safari 可能渲染成橙色方块，Chrome/Firefox 直接忽略，Network 面板里看不到请求，状态码也不报 404，但图就是不出现。
解决办法很直接：
- 把图标转成
.png或.svg（推荐 SVG，矢量无损） - CSS 中改用
url("/icons/logo.svg")，别再碰.ico - 如果必须保留
.ico，只用于<link rel="icon">，别塞进background-image
元素本身没有尺寸或被其他样式覆盖
背景图加载成功（Network 显示 200），但页面看不见，大概率是盒子没大小或被盖住了：
-
body默认没高度，只靠内容撑开；加min-height: 100vh;和margin: 0;再试 - 检查 computed 样式里
background-position是否偏移到视野外（比如1000px 1000px） -
background-size: cover;可能裁掉关键区域，换成contain或auto看是否恢复 - 其他 CSS 规则（如
background: none;）可能覆盖了你的声明，用开发者工具看 Styles 面板里哪条被划掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
