::before 伪元素需同时满足 content 非 none（推荐 content: ""）、display 设为 block/inline-block、设置宽高或 padding，三者缺一不可；否则 background-image 无法渲染。
content 为空（未声明、值为 none、normal 或 unset）时，::before 根本不生成盒模型——背景图连渲染机会都没有。
content 未声明或非法值 → 伪元素被跳过创建
浏览器规范强制要求：::before 必须有非 none 的 content 值，否则整个伪元素节点不会进入渲染树。DevTools 的 Elements 面板里根本看不到 ::before 节点，更别说 background-image 了。
-
content: ""是最稳妥的写法：生成空盒，后续所有样式（包括background-image、width、height）才能生效 -
content: none、content: normal、content: unset全部等效于没写，伪元素静默丢弃 - 漏掉英文引号（如写成
content: →）会导致整条 CSS 规则解析失败，DevTools 中该规则会变灰
content 正确但 background-image 仍不显示
即使 content: "" 写对了，background-image 也可能“存在却不可见”，因为伪元素默认是 display: inline，此时 width、height、background-image 全部无效。
- 必须显式设置
display: block或display: inline-block - 仅设
background-image不够，还得配width和height（或padding），否则没有渲染区域 - 用
border: 1px solid red临时验证：如果边框能出来，说明伪元素已生成且定位正常；如果边框也不见，回头再查content
图片资源本身加载失败
content: "" + background-image: url(...) 看似正确，但图片请求可能被拦截或 404，导致“空白”。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools 的 Network 面板，过滤
Img类型，确认图片请求是否成功 - CORS 限制下，跨域图片会被静默拒绝，控制台可能无报错，但响应状态是
0 - 路径错误（如相对路径从 CSS 文件位置算起，不是 HTML 位置）也常导致 404
真正卡住人的地方，往往不是背景图写错了，而是 content 没写、写了但值非法、或者写了但没配 display 和尺寸——这三个条件缺一不可，少一个，background-image 就永远在等待一个不会到来的盒子。
