css中background-image的url()路径必须以css文件所在目录为基准，如css在/css/style.css中，图片在/images/bg.jpg，则应写url("../images/bg.jpg")；误用html路径习惯或未校验network请求url是90%不显示的主因。
直接写 url() 却不显示字体或背景图，90% 是路径基准点搞错了——它永远以 CSS 文件所在目录为起点，不是 HTML 页面，也不是你“以为”的项目根目录。
background-image 的 url() 路径怎么写才对
浏览器请求背景图时，会把 url() 里的路径拼到 CSS 文件的完整 URL 后面。比如 CSS 文件在 /static/css/main.css，你写 url(images/bg.png)，浏览器就真去请求 /static/css/images/bg.png；而图其实在 /static/images/，那就 404。
- 用相对路径：明确从 CSS 文件出发走几级，
url(../images/bg.jpg)表示退一级再进images - 用根路径（绝对路径）：
url(/assets/images/bg.jpg)，从域名根开始，和 CSS 放哪无关，但部署到子路径（如/myapp/）时需额外处理前缀 - 别用
file://、C:/或含中文/空格的路径——现代浏览器直接拒绝加载，Network 面板里能看到net::ERR_INVALID_URL - 路径里有中文或空格？不是“试试看”，而是必须改名：用英文+下划线，比如
hero_banner.jpg
@font-face 中的 url() 和 background-image 一样吗
规则相同：路径也以 CSS 文件位置为基准。但字体还有额外限制，容易静默失败。
-
src: url('fonts/icon.woff2')—— 这个fonts/是相对于 CSS 文件的，不是 HTML - WOFF2 是首选格式，但得确保服务器返回正确的 MIME 类型
font/woff2，否则某些浏览器（尤其是 Safari）会忽略 - 跨域字体文件必须配 CORS 头，否则控制台报
Access to font at 'xxx' from origin 'yyy' has been blocked - 不要只提供一种格式，兜底写法：
src: url('font.woff2') format('woff2'), url('font.woff') format('woff')
SVG 作 background-image 为什么常不显示
不是路径错，是 SVG 文件结构或 MIME 问题。直接 url(icon.svg) 在旧版 Safari 或 WebView 里大概率白屏。
- 确保 SVG 文件开头有 XML 声明和
xmlns：<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg">...</svg> - 更稳的方式是转成 data URI：
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...")，绕过服务器配置和路径解析 - 如果 SVG 里含
<style></style>或 JS，data URI 方式下这些逻辑会被丢弃——背景图只渲染静态 DOM - 别写
url(<svg>...</svg>)，这语法非法，CSS 解析器直接跳过整条声明
动态换图或换字体时，url() 能不能运行时拼接
url() 本身不支持字符串拼接或变量插值，纯 CSS 里做不到 url(${path}) 这种写法。
- 真正可行的是用 CSS 变量 + JavaScript：
body { --bg-url: url(/img/a.jpg); background-image: var(--bg-url); }，再用document.documentElement.style.setProperty('--bg-url', 'url(/img/b.jpg)')切换 - 构建工具（Webpack/Vite）能帮你做编译期替换，比如
url('@/assets/bg.png')被自动解析为带哈希的正确路径，但这是 loader 层的事，不是原生 CSS 能力 - 别在 Sass/Less 里幻想
@import能“改变”路径上下文——最终生成的 CSS 文件在哪，url()就以哪为基准
最易被忽略的一点：所有路径问题，第一反应不该是“是不是代码写错了”，而是打开 Chrome DevTools 的 Network 标签页，点开那个 404 请求，看「Request URL」栏里浏览器实际发出去的地址——它不会说谎，一眼就能看出是多退了一级，还是少了个斜杠，或是中文被截断成了乱码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
