css背景图循环

CSS背景图循环是一种很有用的技巧，可以让我们在网页中使用较小的背景图片来填充整个页面，节省加载时间。下面我们来看一下如何使用CSS背景图循环。

/* CSS代码 */
body {
  background-image: url('bg.png');
  background-repeat: repeat;
}
 

上述代码中，我们将页面背景图片设置为名为bg.png的文件，然后使用CSS属性background-repeat来让背景图片循环展示，即repeat。这样，即使bg.png图片很小，也可以填充整个页面。

同时，也可以使用其他的background-repeat属性值：

/* CSS代码 */
body {
  background-image: url('bg.png');
  background-repeat: repeat-x;
 /* 水平方向循环 */
  background-repeat: repeat-y;
 /* 垂直方向循环 */
  background-repeat: no-repeat;
 /* 不循环 */
}
 

当然，也可以在CSS代码中使用多个background-image属性，来实现多张背景图片循环。具体代码如下：

/* CSS代码 */
body {
  background-image: url('bg-1.png'), url('bg-2.png');
  background-repeat: repeat, no-repeat;
}
 

上述代码中，我们使用逗号分隔了两个background-image属性，分别对应名为bg-1.png和bg-2.png的两张背景图片。同时，我们还指定了第一张图片repeat循环，第二张图片no-repeat不循环。

CSS背景图循环是一种很方便实用的技巧，可以让我们大大提升网页的性能。希望以上介绍可以对你有所帮助。