background-repeat用于控制背景图重复方式，常用值包括repeat（默认，双向重复）、no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）、space（等距平铺不裁剪）、round（缩放填满）。
背景图重复出现是 CSS 中的默认行为，用 background-repeat 就能轻松控制是否重复、如何重复。
理解 background-repeat 的常用值
这个属性决定背景图像在元素内如何平铺。常见取值有：
- repeat（默认）：横向 + 纵向都重复
- no-repeat：完全不重复，只显示一张图
- repeat-x：仅水平方向重复
- repeat-y：仅垂直方向重复
- space：图像完整平铺，间距均匀，不裁剪
- round：缩放图像以刚好填满容器，可能轻微拉伸
让背景图只显示一次（最常用）
多数情况下，你只想让 logo 或装饰图出现一次，不希望它密密麻麻铺满整个区域：
div {
background-image: url('icon.png');
background-repeat: no-repeat;
}
配合 background-position 可精准定位，比如居中：background-position: center; 或 background-position: 20px 30px;
控制重复方向或实现特殊布局
有些设计需要有限度的重复：
立即学习“前端免费学习笔记（深入）”；
- 做一条横贯顶部的装饰条？用
repeat-x+top - 侧边栏竖线分割？用
repeat-y+right - 想铺满又不想切图？试试
space，尤其适合图标网格 - 响应式背景要严丝合缝？
round会自动缩放图像适配尺寸
简写写法别漏掉 repeat
用 background 简写时，background-repeat 是其中一环，顺序为：background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip];
例如：
div {
background: #f0f0f0 url('bg.png') top left / auto no-repeat;
}
这里 no-repeat 明确写在最后，覆盖了默认的 repeat。
