必须显式声明 background-repeat: no-repeat，否则默认平铺；容器需有宽高（如 min-height）才能显示背景图；路径正确、尺寸（cover/contain）和定位（center）需配合使用。
background-repeat: no-repeat 必须显式声明
浏览器默认会平铺背景图，不写 background-repeat 就等于 repeat，哪怕你只设了一张图，它照样横向纵向复制铺满。很多人以为只要指定了 background-image 就自动“不重复”，其实完全不是。
实操建议：
- 必须和
background-image一起写，推荐用简写background一次性定义，避免遗漏 - 单独设置时，顺序无关，但
background-repeat: no-repeat这行不能少 - 如果用了 CSS 预处理器或框架（比如 Tailwind），确认它没在某处覆盖了你的
no-repeat
background-size 和 background-position 决定图片是否“可见”
设了 no-repeat 却看不到图？大概率是图片太大被裁、太小缩成点、或位置偏到视口外。这时候光靠 no-repeat 不够，得配好尺寸和定位。
常见错误现象：background-image 加载了，DevTools 里能看到请求成功，但元素上一片空白。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
background-size: cover填满容器（可能裁剪）、contain完整显示（可能留白） - 用
background-position: center把图居中，比默认的top left更可控 - 如果容器高度为
0或没内容撑开，背景图自然不可见——先检查height或min-height
HTML 元素本身没渲染区域，背景图就等于不存在
<div></div> 这种空标签，如果没有宽高、内边距、边框或内容，CSS 计算出的高度就是 0px，背景图再大也没地方画。
使用场景：常出现在用 div 做装饰性背景、卡片封面、Banner 区域时，忘了给基础尺寸。
实操建议：
- 给元素设
width和height，或至少min-height（比如min-height: 100vh） - 用
padding撑开空间比单纯设height更安全（避免内容溢出时高度塌陷） - 用浏览器 DevTools 的“Computed”面板看最终生效的
height和background-size值，别只信 CSS 规则
路径错误或跨域限制导致图片加载失败
背景图路径写错、大小写不符、或服务器没配 CORS，都会让 background-image 显示为空白，控制台却不一定报错（尤其本地 file:// 协议下）。
性能影响：404 的背景图请求仍会触发 HTTP 请求，拖慢页面加载，且无法 fallback。
实操建议：
- 路径一律用相对路径或绝对路径，避免
~/或未解析的变量（如 SASS 中漏了url()包裹） - 检查 Network 面板里该图片请求的状态码，
404或blocked:mixed-content是典型信号 - 本地开发时，用
http-server或 VS Code Live Server 启服务，别直接双击 HTML 打开（file:// 协议下 background-image 可能被禁）
background 写成一行，比如 background: url(./img/hero.jpg) no-repeat center / cover;，再配上 min-height: 500px，基本不会踩坑。最常被忽略的是容器自身没尺寸——图再对，画布是空的，也白搭。 
