background-repeat: no-repeat 是控制背景图不平铺的核心属性，必须与 background-image 同时使用，推荐用 background 简写并配合 background-position 和 background-size 精确控制单张图的显示位置与缩放。
background-repeat: no-repeat 是核心设置
HTML 中背景图片默认会平铺（repeat），要让它只显示单张、不重复，必须显式设置 background-repeat 为 no-repeat。仅靠 background-image 无法控制平铺行为。
- 如果只写
background-image: url(...)，浏览器仍按默认repeat渲染 -
no-repeat必须和background-image同时存在才生效 - 建议用简写属性
background一次性定义，避免遗漏
配合 background-position 控制单张图位置
设了 no-repeat 后，图片默认贴左上角。若需居中、右下、或自定义偏移，必须搭配 background-position —— 否则容易误以为“没生效”。
- 常用值：
center（水平垂直居中）、right bottom、50px 20px（x y 像素偏移） - 百分比也支持，如
background-position: 75% 25% - 单独写
background-position但漏掉no-repeat，图片仍会平铺，只是每张都按该位置对齐——这是常见误解点
完整 CSS 示例（推荐简写形式）
div {
background: url('logo.png') no-repeat center / contain;
width: 300px;
height: 200px;
}
说明：
-
no-repeat确保单张不平铺 -
center让图片在容器内居中 -
/ contain是background-size的简写，确保整张图可见（非拉伸） - 若省略
/ contain，图片可能被裁剪或按原始尺寸显示（超出容器时只显示左上部分）
注意 body 或 html 标签的全局影响
如果给 设单张背景图却看到多张，大概率是：容器高度不够 + 没设 min-height: 100vh，导致内容区域短于视口，背景在 body 下方继续平铺。
立即学习“前端免费学习笔记（深入）”；
-
解决方法：加
min-height: 100vh或height: 100%（需父级也设高度） - 更稳妥写法：
body { background: url('bg.jpg') no-repeat center / cover; min-height: 100vh; margin: 0; } -
cover和contain行为差异大：前者可能裁剪，后者保证全图可见但留白——选哪个取决于设计需求，不是“不平铺”本身的问题，但常被一并搞错
no-repeat 往往不是孤立设置的；它和 background-position、background-size、容器尺寸三者联动，缺一不可。漏掉任一环节，都可能让“单张图”变成看不见、只露一角、或意外平铺。 
