CSS 背景重复

背景重复是CSS中用于控制背景图片如何在元素内重复显示的属性，它可以使背景图片以不同的方式填充元素。

基本语法

css

元素选择器 {
  background-repeat: 重复方式;
}

重复方式的取值

background-repeat属性支持以下取值：

1. repeat（默认值）

背景图片在水平和垂直方向上都重复，填满整个元素。

css

.element {
  background-image: url('images/pattern.png');
  background-repeat: repeat;
}

2. repeat-x

背景图片只在水平方向上重复，垂直方向上不重复。

css

.element {
  background-image: url('images/pattern.png');
  background-repeat: repeat-x;
}

3. repeat-y

背景图片只在垂直方向上重复，水平方向上不重复。

css

.element {
  background-image: url('images/pattern.png');
  background-repeat: repeat-y;
}

4. no-repeat

背景图片在水平和垂直方向上都不重复，只显示一次。

css

.element {
  background-image: url('images/pattern.png');
  background-repeat: no-repeat;
}

5. space

CSS3新增值，背景图片在水平和垂直方向上均匀分布，不裁剪，图片之间留有空白。

css

.element {
  background-image: url('images/pattern.png');
  background-repeat: space;
}

6. round

CSS3新增值，背景图片在水平和垂直方向上均匀分布，会根据需要拉伸或压缩图片以填满整个元素，不留下空白。

css

.element {
  background-image: url('images/pattern.png');
  background-repeat: round;
}

双值语法

CSS3支持双值语法，可以分别指定水平和垂直方向的重复方式：

css

.element {
  background-image: url('images/pattern.png');
  background-repeat: repeat-x no-repeat; /* 水平重复，垂直不重复 */
}

双值语法的取值顺序是：水平方向在前，垂直方向在后。

应用场景

1. 创建纹理背景

使用小图案在水平和垂直方向上重复，创建纹理背景：

css

body {
  background-image: url('images/texture.png');
  background-repeat: repeat;
}

2. 创建边框效果

使用装饰性图案在水平或垂直方向上重复，创建边框效果：

css

.header {
  background-image: url('images/border-top.png');
  background-repeat: repeat-x;
  padding-top: 20px;
}

.sidebar {
  background-image: url('images/border-right.png');
  background-repeat: repeat-y;
  background-position: right top;
  padding-right: 20px;
}

3. 单个背景图片

使用重要的图片作为背景，只显示一次：

css

.hero {
  background-image: url('images/hero-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
}

4. 均匀分布图片

使用space或round值在容器内均匀分布图片：

css

.gallery {
  background-image: url('images/photo.jpg');
  background-repeat: space;
  background-size: 200px 150px;
  padding: 20px;
  height: 600px;
}

与其他背景属性的结合

background-repeat通常与其他背景属性结合使用：

css

.element {
  background-image: url('images/pattern.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 200px 150px;
}

浏览器兼容性

浏览器	支持情况
Chrome	完全支持
Firefox	完全支持
Safari	完全支持
Edge	完全支持
IE	IE6及以上支持

space和round值以及双值语法在IE9及以下浏览器中不支持。

总结

background-repeat是CSS中用于控制背景图片重复方式的重要属性，它支持多种重复方式和灵活的双值语法。合理使用background-repeat可以创建丰富的背景效果，从简单的纹理到复杂的布局，都可以通过这个属性实现。