设置单张背景图需显式声明background-repeat: no-repeat并确保容器有尺寸，background-size影响显示效果，多图用逗号分隔会叠加，img标签与背景图语义不同。
background-image 设置单张图片不重复
直接用 background-image 配合 background-repeat: no-repeat 就行，但很多人漏掉关键点：默认会平铺（repeat），不显式关掉就会看到多张。
-
background-repeat: no-repeat必须写，不能依赖浏览器默认（实际没有可靠默认） - 如果父容器宽高为
0或未设置，图片可能根本不可见——得确保容器有尺寸或设min-height - 用简写
background时，no-repeat要紧跟在图片路径后，顺序错了会被覆盖：background: url(img.jpg) no-repeat center/cover;
background-size 影响“只显示一张”的视觉效果
哪怕只有一张图，background-size 设错也会让它被裁切、拉伸或留白，看起来像“没铺满”或“显示不全”。这不是重复，但常被误认为配置失败。
-
background-size: cover：缩放填满容器，可能裁边 -
background-size: contain：完整显示整张图，可能留白 -
background-size: 100% 100%：强制拉伸变形，慎用 - 不设
background-size时，图片按原始尺寸显示，只出现在左上角，其余区域空白——这其实是“一张图”，但容易被当成失效
多个 background-image 会导致多图叠加
CSS 允许逗号分隔写多个背景图，比如 background-image: url(a.jpg), url(b.jpg)。一旦这样写，就不是“一张”了，而是层叠显示——即使其中一张是透明占位，也会计入。
- 检查是否误用了逗号分隔的多背景语法
- 用 DevTools 的 Elements 面板看 computed 样式，确认
background-image值里只有一个url(...) - 注意框架或 CSS-in-JS 可能注入额外背景（比如重置样式、组件库默认值）
HTML 标签内用 img 不算 background-image
如果目的是“页面上只出现一张图”，但用的是 
background-image 完全是两回事：前者是内容元素，后者是装饰性样式。别混在一起排查。
立即学习“前端免费学习笔记（深入）”；
-
no-repeat - 但
background-attachment: fixed或伪元素叠加等背景图特性 - 语义上，装饰图用
background-image，内容图用
最常被忽略的是容器尺寸和 background-repeat 的显式声明。没设高度的 div + 默认 repeat = 看不见图；写了 no-repeat 但忘了设 background-size 或 background-position = 图只在角落露个头。这些都不是 bug，是 CSS 背景渲染的自然逻辑。
