background-repeat: no-repeat必须显式声明，否则默认repeat会平铺；它仅控制是否重复，不控制缩放，需配合background-size和容器尺寸确保可见。
必须显式写 background-repeat: no-repeat，否则哪怕只设了一张图，浏览器也默认平铺——这不是 bug，是规范行为。
background-repeat: no-repeat 必须手动声明
很多人以为只要写了 background-image 就自动“只显示一张”，其实完全相反：background-repeat 的默认值就是 repeat。不写这行，等于写了 repeat。
- 单独设置时，
background-repeat: no-repeat这行不能少，顺序无关，但缺了就重复 - 用
background简写时，no-repeat必须紧跟在图片路径后，比如：background: url(bg.jpg) no-repeat center/cover; - 如果用了 Tailwind、Bootstrap 或其他 CSS 框架，要检查它们是否在某处重置了
background-repeat（比如bg-[url(...)]默认没带no-repeat）
容器没尺寸，背景图就等于不存在
div 之类空元素默认高度为 0px，哪怕 background-image 加载成功，在 DevTools 里能看到请求，页面上也是一片空白。
- 必须给容器设
width和height，或至少min-height（如min-height: 100vh） - 用
padding撑开空间比单纯设height更安全，避免内容溢出时高度塌陷 - 打开 DevTools → Elements → Computed 面板，直接看最终生效的
height和background-size值，别只信你写的 CSS 规则
background-size 和 background-position 决定“能不能看见”
设了 no-repeat 却看不到图？大概率不是重复问题，而是图被缩太小、裁太多，或位置偏到可视区外。
-
background-size: cover：等比缩放填满容器，可能裁边；contain：完整显示整张图，可能留白 -
background-position: center比默认的top left更可控；右下角用bottom right - 不设
background-size时，图片按原始像素尺寸显示，只出现在左上角——它确实“不重复”，但容易误判为失效
路径错误或跨域限制也会导致“空白”假象
图片 404 或被 CORS 阻止时，控制台不一定报错（尤其本地 file:// 协议下），但背景区域就是空的。
- 路径一律用相对路径或绝对路径，避免漏掉
url()包裹（比如 SASS 中写成background-image: ~"img/bg.jpg"是错的） - 打开 Network 面板，找对应图片请求的状态码：
404或blocked:mixed-content是典型信号 - 本地开发建议用
http-server启服务，避开file://协议下的资源加载限制
最常被忽略的是两件事：一是把 no-repeat 当成可选项，二是以为“设了图就一定看得见”。其实只要容器高度为 0、路径错一个字母、或者简写里漏掉 no-repeat，都会让“单张背景图”彻底消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
