CSS background-repeat属性

城市现在为了评选文明城市，都开始注重城市的市容市貌多种树、多修路，尤其是人行甬道都开始铺设清洁的瓷砖、大理石等一些装饰性设施。我们今天的话题就从甬道上的这些东西开始。

Repeat英文意思是“重复”，拿到CSS中就有“平铺”的意思。顾名思义，background-repeat就是“背景平铺”的意思。它是控制背景图片的平铺方式。平铺的概念在现实生活中比比皆是，比如地板砖的平铺、农村二层小洋房墙壁的瓷砖平铺……

---

既然这样，那平铺一定有其铺设的规则，不能东一榔头西一斧头的。在CSS规则中，background-
repeat控制的平铺规则有：

• repeat-x：横向平铺；
• repeat-y：纵向平铺；
• repeat：横向平铺和纵向平铺（默认值）；
• no-repeat：不平铺；
• round：背景图像自动缩放直到适应且填充满整个容器或某个方向。（CSS3）
• space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

---

首先，我们先看看前四个规则（这里以repeat-x规则为例）

在CSS2中，background-repeat的写法是这样的：

    background-repeat: repeat-x;

它规定的是背景容器中背景图片横向和纵向的统一平铺规则，上例中即是横向和纵向都共同遵守repeat-x的平铺规则。

---

我们来逐个分析这些规则：

相信军训我们都经历过吧，想当年，我就是站在炎炎烈日下，接受着军训的考验的，那真是又痛苦，又记忆满满。军训有一项就是听从口令，排列阵型。

---

接下来，我们想象自己就是教官，开始对背景图片下达命令：

repeat-x口令：“全体都有，以为***基准，成一横排排列，向左向右看 ~ ~ ~ 齐”

repeat-y口令：“全体都有，以为***基准，成一竖排排列，向前向后看~ ~ ~齐”

repeat口令：“全体都有，以为***基准，成一方队排列，向左向前看~ ~ ~齐”

no-repeat口令：“立正，稍息，除了***，全体解散”（***被罚站了，哈哈）

---

休息过后，CSS3总教官指示我们排列阵型的训练加项，加项的内容有：

round口令：“全体都有，以为***基准，成密集队形，方队排列，小碎步倒腾起来，向左向前看~ ~ ~齐”（每个人都被挤扁了）；

space口令：“全体都有，以为***基准，成散开队形，方队排列，小碎步倒腾起来，向左向前看~ ~ ~齐”（每个人之间有了距离）；

---

接下来CSS3总教官又有了新指示：横排和纵排可以分别下达指令，于是就有了诸如以下口令：

     background-repeat:repeat no-repeat;     background-repeat:repeat round;     background-repeat:round space;              .......

第一个口令是给横排下达的命令，而第二个口令是给纵排下达的口令。

比如：

repeat no-repeat口令：“以为***基准，向左向右看~ ~ ~齐，第二排往后解散”；

repeat round口令：“以为***基准，向左向右看~ ~ ~齐，纵排成密集队形，向前向后看~ ~ ~齐”；

round space口令：“以为***基准，横排成密集队形，向左向右看~ ~ ~齐，纵排成散开队形，向前向后看~ ~ ~齐”；

……

上面的***是一个基准，我们可以把它看成是元背景图片

好了，漫长的军训在我们的严格训练下有意义的结束了。

---

最后我们可以开始写军训总结了：

• 综合CSS3，background-repeat属性可以有单值，该值表示背景图片在横向和纵向的统一平铺规则；也可以有双值，其中第一、二个值分别表示背景图片在横向和纵向的平铺规则。在双值模式下，repeat-x和repeat-y被摒弃，因为没有什么意义，直接可以用repeat和no-repeat来代替。

• 需要说明的是：其实无论是横向的平铺还是纵向平铺，它不是射线形式的平铺，而是直线形式的平铺。比如横向平铺时，它是通过元背景图片向左向右延伸，纵向平铺时，它是通过元背景图片向上向下延伸。

  

  图片来源于
  http://www.zhangxinxu.com/wordpress/2011/05/%E7%BF%BB%E8%AF%91-css3-backgrounds%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D/

• round值和space值是用于调试平铺后的背景图片能够完整的展现在背景容器内。
  为了达成这个目的，它们真是八仙过海，各显神通：

  • round是用牺牲图片原尺寸大小来实现（可能会导致图片失真）
  • space是用补白的方式来实现。

  round和space他们调节的力度大小与背景容器的大小、背景图片的绘画起点（background-origin）、背景图片的大小（background-size）有关，而与背景图片的附着点（background-attachment除了fixed值外）、背景图片的剪切方式（background-clip）、背景图片的定位（background-position）无关。

这里要说明一下：background-attachment属性的值为fixed时，round和space就会变心，它会以完整的铺满可视窗口为目的，而不是背景容器

原文链接