在网页设计中，经常需要使用背景图片来装饰页面。使用单张背景图片的情况下，只需在CSS中设置background-image属性即可实现。但如果需要使用重复背景图片，就需要用到CSS中的background-repeat属性。本文将从不同的角度，详细介绍如何在CSS中使用重复背景图片。
一、如何选取适合的背景图片
在使用重复背景图片前，首先要选取适合的背景图片。选取背景图片时，需要考虑以下几点： 1. 图片的大小必须适合用于重复，太小的图片重复后会出现明显的瑕疵，太大的图片则会占用过多的带宽和资源。通常情况下，选取一张500x500像素左右的图片是最合适的。 2. 图片的内容应当与页面的主题相关，以达到最好的装饰效果。 3. 图片的格式应当使用透明格式，如PNG或GIF，以便于重复和有透明度的效果。
二、CSS中使用background-repeat属性
在选取了适合的背景图片后，需要在CSS中使用background-repeat属性才能实现重复显示。这个属性有两个可选值：repeat和no-repeat。 1. repeat：默认值，背景图片沿着水平和垂直方向重复显示，直到填满整个背景。如果图片的宽度和高度不够填满整个背景，那么背景会被平铺重复。 2. no-repeat：背景图片只会显示一次，不会被铺满整个背景。 下面是一个使用重复背景图片的例子：
在这个例子中，background-image属性设置了背景图片的URL地址。background-repeat属性设置为repeat，这样背景图片就会不断地沿着水平和垂直方向重复显示。
三、在不同的HTML元素上使用background-repeat属性
除了在整个页面的body元素上使用background-repeat属性，我们还可以在其他的HTML元素上使用这个属性。根据不同的HTML元素，需要注意以下几点： 1. 在div元素上使用：div是最常见的HTML元素之一，在页面中广泛应用。如果我们希望在一个div元素上使用重复背景图片，只需要在CSS中设置这个div的background-repeat属性即可。
这是一个带有重复背景图片的div
2. 在table元素上使用：table元素是用来展示表格的HTML元素。在使用重复背景图片时，我们需要在CSS中设置table元素和td元素的background-repeat属性。
在这个例子中，我们不仅在table元素上使用了background-repeat属性，还在td元素上使用了这个属性。这样，整个表格都将带有重复背景图片。
四、如何设置背景图片的位置
除了使用background-repeat属性来控制背景图片的重复方式外，我们还可以使用background-position属性来控制这个背景图片的位置。这个属性有很多可选值，包括： 1. left top：图片显示在左上角 2. left center：图片显示在左中间 3. left bottom：图片显示在左下角 4. center top：图片显示在中上方 5. center center：图片显示在中间 6. center bottom：图片显示在中下方 7. right top：图片显示在右上角 8. right center：图片显示在右中间 9. right bottom：图片显示在右下角 10. x% y%：指定从背景图片左上角开始算起的偏移量，百分比值。
这是一个带有重复背景图片且居中显示的div
在这个例子中，我们在CSS中使用了background-position属性，并将它的值设置为center center，这样背景图片将在这个div元素的居中显示。
五、如何调整多个重复背景图片的间距
在一些情况下，我们可能希望在页面中使用多个重复背景图片，例如在菜单或导航栏等区域，这时候，我们需要控制多个背景图片之间的间距。我们可以使用CSS3中的background-size属性来控制这个背景图片的大小以及间距。这个属性有两种可选值： 1. background-size: length：用像素值指定图片的大小。 2. background-size: percentage：用百分数指定图片的大小。这个百分数是以背景区域的大小为基础计算的。 下面是一个使用background-size属性调整多个背景图片间距的例子：
在这个例子中，我们使用了三个不同的背景图片，并将它们分别指定给了三个url()函数。background-repeat属性被设置为repeat-y，这样背景图片就会沿着垂直方向重复显示。background-position属性被设置为left top、right top和left bottom，用于控制多个背景图片的位置。background-size属性被设置为20px、30%和40px，分别用于控制多个背景图片之间以及与页面之间的间距。
总结
本文详细介绍了如何使用背景图片。在选取了适合的背景图片后，我们可以在CSS中使用background-repeat和background-position属性来控制这个背景图片。同时，我们还可以在不同的HTML元素上使用这些属性，并设置不同的值来实现不同的效果。
