background-repeat用于控制背景图重复方式，其取值包括repeat（双向重复）、no-repeat（不重复）、repeat-x（横向重复）、repeat-y（纵向重复）、space（均匀分布不留白）、round（缩放填满）；通过设置相应值可实现图案铺满或单次显示，配合background-position与background-size可精准控制背景效果。
在CSS中，background-repeat 属性用于控制背景图像的重复方式。通过它，你可以让背景图横向、纵向、两个方向重复铺满，也可以设置为不重复，实现精准的视觉效果。
background-repeat 常用取值说明
以下是 background-repeat 支持的主要取值及其作用：
- repeat：默认值，背景图像在水平和垂直方向都重复铺满容器。
- no-repeat：背景图像不重复，只显示一次，常用于避免图案重叠。
- repeat-x：仅在水平方向重复，适合做横条纹或顶部装饰。
- repeat-y：仅在垂直方向重复，适用于侧边栏装饰等场景。
- space：图像不被裁剪，尽可能多地完整显示，并均匀分布空白区域。
- round：图像会被缩放以适应容器，填满空间而不留空白。
如何让背景图案铺满整个元素
使用 repeat 可实现图案铺满，适合小图标或纹理背景：
div {
background-image: url('pattern.png');
background-repeat: repeat;
}如果希望图像自动伸展并完全覆盖背景区域，可结合 background-size: cover 使用（注意：这通常用于单张大图而非小图案）。
立即学习“前端免费学习笔记（深入）”；
如何防止背景图重复，只显示一次
当只需要一个logo或装饰图时，应设置不重复：
.header {
background-image: url('logo-bg.png');
background-repeat: no-repeat;
background-position: center top; /* 配合定位更精确 */
}这样图像只出现一次，不会重复，常用于页头或页脚设计。
高级重复模式：space 与 round
这两个值适合需要美观排列多个背景图的情况：
- space：图像之间自动加空隙，边缘不留白，图像不变形。
- round：自动调整图像大小，使其刚好填满空间，数量合适时效果最佳。
.tile-bg {
background-image: url('icon.png');
background-repeat: space;
}基本上就这些常用方式。根据设计需求选择合适的重复模式，再配合 background-position 和 background-size，就能灵活控制背景显示效果。
