CSS中url()路径始终相对于当前CSS文件位置，推荐用绝对路径url(/images/logo.png)或正确相对路径url(../images/logo.png)，避免空格中文，优先使用英文命名，构建工具会自动处理路径重写。
url() 里路径写相对还是绝对？
CSS 中 url() 的路径解析，始终相对于当前 CSS 文件的位置，不是 HTML 页面，也不是浏览器地址栏。这点最容易搞错。
- 如果 CSS 文件在
/static/css/style.css，图片在/static/images/logo.png，那得写url(../images/logo.png) - 如果用绝对路径，推荐以站点根目录为基准：
url(/images/logo.png)（注意开头的/） - 别写成
url(./images/logo.png)冗余点号，也别漏掉引号——url(images/logo.png)合法，但url("images/logo.png")更稳妥，尤其路径含空格或特殊字符时
路径中带空格或中文怎么办？
浏览器对 URL 编码处理不一致，直接写 url(我的图片.jpg) 在某些环境（如本地 file:// 协议）会失败。
- 最稳妥做法：手动 URL 编码空格为
%20，中文转成 UTF-8 编码后百分号编码，比如背景图.jpg→%E8%83%8C%E6%99%AF%E5%9B%BE.jpg - 更实际的建议：干脆避免空格和中文，用
bg-header.jpg这类命名，省去编码麻烦，也利于团队协作和构建工具处理
为什么 background-image: url(...) 没生效？
常见原因不是语法错，而是路径或加载问题：
- 检查浏览器开发者工具的 Network 标签页，看该图片请求是否返回 404 或 403
- 确认服务器是否允许访问该路径（比如 Express 默认不托管
/images目录，需显式配置静态资源） - 注意 CSS 优先级：如果上级样式用了
background-image: none或其他背景声明，可能被覆盖 - Webpack/Vite 等构建工具会重写
url()路径，此时写相对路径即可，不要手动加public/前缀；但若图片放在public/下，就用绝对路径url(/logo.png)
要不要加 format() 提示？
url() 本身不支持 format()，那是 @font-face 或现代 image-set() 的语法。想做图片格式降级或响应式，得换方案：
- 多格式 fallback：用
background-image多次声明，浏览器取第一个能加载的：background-image: url(icon.avif); background-image: url(icon.webp); background-image: url(icon.png);
- 真正需要条件加载（如根据 DPR、宽高），得用
picture+img，CSS 背景图不支持 srcset 级别的精细控制
路径看似简单，但跨项目、跨构建工具、跨部署环境时，url() 的行为差异最容易让人花半小时查不出图为啥不显示。盯住“CSS 文件位置”这个锚点，比记一堆规则更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
