CSS中的background-repeat属性详解

一、知识点的描述
background-repeat属性用于定义背景图片如何在元素背景区域内重复（平铺）。当背景图片尺寸小于元素尺寸时，这个属性控制图片是否重复、以及如何重复，是控制背景图案排布的关键属性。

二、属性值的详细讲解
该属性的取值主要分为以下几类，我会按照从基础到进阶的顺序解释：

1. repeat（默认值）

   • 描述：背景图片在水平和垂直方向上都重复平铺，直到铺满整个元素背景区域。
   • 效果：如果图片尺寸小于元素，会从左上角开始，像贴瓷砖一样铺满。
   • 示例代码：

     div {
       background-image: url("tile.png");
       background-repeat: repeat;
     }
     

2. repeat-x

   • 描述：背景图片只在水平方向（x轴）重复，垂直方向不重复。
   • 效果：图片会沿水平方向排成一行，垂直方向仅显示一行（通常位于元素顶部，具体位置由background-position决定）。
   • 适用场景：创建水平边框或条纹背景。

     div {
       background-repeat: repeat-x;
     }
     

3. repeat-y

   • 描述：背景图片只在垂直方向（y轴）重复，水平方向不重复。
   • 效果：图片沿垂直方向排成一列，水平方向仅显示一列。

     div {
       background-repeat: repeat-y;
     }
     

4. no-repeat

   • 描述：背景图片不重复，只显示一次。
   • 效果：常用于单个logo或装饰性图片。

     div {
       background-repeat: no-repeat;
     }
     

5. space

   • 描述：背景图片在水平和垂直方向上重复，但不会裁切图片，而是通过均匀分配空白间距来铺满区域。
   • 规则：
     • 图片完整显示，不会被裁剪。
     • 图片之间的间距会被自动计算，使第一张和最后一张图片紧贴边缘。
     • 如果区域太小放不下一张完整图片，会退化为no-repeat。
   • 示例代码：

     div {
       background-repeat: space;
     }
     

6. round

   • 描述：背景图片重复，但会根据空间尺寸自动调整图片大小（拉伸或压缩），确保铺满时不留空白。
   • 规则：
     • 图片会被轻微缩放，使得能完整铺满区域且无间隙。
     • 如果区域尺寸不是图片尺寸的整数倍，浏览器会自动调整图片尺寸。
   • 示例代码：

     div {
       background-repeat: round;
     }
     

三、双值语法（CSS3新增）
CSS3允许为水平和垂直方向分别指定重复方式，格式为：background-repeat: <horizontal> <vertical>;。
示例：

• background-repeat: repeat space; → 水平重复，垂直空间排列。
• background-repeat: round no-repeat; → 水平自动缩放重复，垂直不重复。

四、与background-size的协同工作
background-repeat的行为会受到background-size影响：

• 如果设置了background-size: cover或contain，通常会将background-repeat隐式设为no-repeat，因为图片已缩放至覆盖或容纳区域。
• 在自定义尺寸下（如background-size: 50px 100px），重复会基于新尺寸进行。

五、实际应用技巧

1. 创建无缝拼接背景：使用小尺寸图案配合repeat，可减少图片大小，提升加载速度。
2. 控制条纹位置：结合background-position，可以精确控制repeat-x或repeat-y的起始位置。
3. 响应式适配：在移动端使用no-repeat避免过多图案干扰，或使用round让背景自适应容器。

六、浏览器兼容性提示

• 所有主流浏览器完全支持repeat、repeat-x、repeat-y、no-repeat。
• space和round在IE9+及现代浏览器中支持。
• 双值语法在IE9+及现代浏览器中支持。

通过以上步骤，你可以根据设计需求灵活控制背景图片的平铺方式，实现从简单重复到智能适应的各类效果。