CSS中有一个非常有用的属性可以让我们设置背景图像重复显示的方式,那就是background-repeat属性。
background-repeat: repeat-x;
以上的代码意义是,让背景图像在水平方向上重复显示,而在垂直方向上不做重复处理。除了repeat-x外,background-repeat还有以下值:
background-repeat: repeat-y; /* 在垂直方向上重复显示,水平方向不做处理 */ background-repeat: no-repeat; /* 不做重复处理 */ background-repeat: repeat; /* 在水平和垂直方向上重复显示 */
需要注意的是,当我们设置背景图像的时候,背景图像本身是有大小的。所以当我们不对背景图像大小做设置的时候,它默认会以实际大小显示,也就是说大多数情况下,我们需要把这个值设置成repeat。
background-repeat: repeat;