background-repeat用于控制背景图重复方式，可选值包括repeat、no-repeat、repeat-x、repeat-y、space和round，支持双值语法分别设置水平和垂直方向，常用于实现背景布局与视觉效果优化。
在CSS中，background-repeat 属性用于控制背景图像的重复方式。它决定了背景图是否以及如何在容器内水平和垂直方向上重复显示。
background-repeat 的常用选项
以下是 background-repeat 支持的主要取值：
• repeat：默认值。背景图像在水平和垂直方向上都重复。• no-repeat：背景图像不重复。图像只显示一次，通常位于元素的左上角。
• repeat-x：背景图像只在水平方向上重复，垂直方向不重复。
• repeat-y：背景图像只在垂直方向上重复，水平方向不重复。
• space：图像在指定方向尽可能重复，但不会被裁剪。多余的空白空间均匀分布在图像之间。
• round：图像会缩放或压缩，以适应容器，确保图像完整地填满区域而不会留空或被裁剪。
简写与双值语法
从CSS3开始，支持使用两个值分别设置水平和垂直方向的重复方式：
• background-repeat: repeat no-repeat; — 水平重复，垂直不重复。
• background-repeat: space round; — 水平方向用 space，垂直方向用 round。
实际应用场景
根据设计需求选择合适的重复方式：
立即学习“前端免费学习笔记（深入）”；
• 使用 no-repeat 配合 background-position 实现单张背景图居中或定位。• 使用 repeat-x 制作横向条纹或页脚装饰线。
• 使用 round 让图标无缝铺满整个区域，避免出现半截图像。 基本上就这些，合理使用 background-repeat 可以更灵活地控制页面视觉效果。
