伪元素::before背景图不显示的主因是未设content属性且无尺寸；必须设置content: ""、display为block等并指定宽高，同时检查路径、overflow、z-index及background-repeat等。
伪元素 ::before 的背景图片不显示，最常见的原因是它默认是**行内元素且不占空间**——即使设置了 background-image，若没有尺寸、内容或显式布局行为，浏览器不会渲染它。
必须设置 content
::before 和 ::after 是“生成内容”的伪元素，content 属性是必需的，哪怕只是空字符串。不写 content，整个伪元素根本不会被创建，背景图自然不会出现。
div::before { background-image: url(icon.png); }
✓ 正确写法（显式设为空）：
div::before { content: ""; background-image: url(icon.png); }
需要明确尺寸或触发布局
仅设 content: "" 还不够——空字符串产生的伪元素默认是 display: inline，宽高为 0，背景图无处可画。必须让它“有形”：
- 设
display: block（或inline-block、flex等） - 指定
width和height（或用padding、min-height等撑开） - 若用
background-size: contain/cover，更需确保容器有明确宽高
检查其他常见干扰项
即使 content 和 display 都对了，仍可能因以下原因看不到背景图：
立即学习“前端免费学习笔记（深入）”；
- 路径错误：检查图片 URL 是否正确（推荐用开发者工具 Network 标签看是否 404）
-
父元素隐藏溢出：父元素设了
overflow: hidden，而伪元素定位超出范围 -
z-index 层级被盖住：伪元素没设
position或z-index，被其他内容遮挡 -
背景重复或位置偏移：加
background-repeat: no-repeat; background-position: center;排查
一个可靠的基础写法示例
div::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-image: url("icon.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
} 
