CSS 使用cover或contain大小的循环背景图

在本文中，我们将介绍如何使用CSS中的cover或contain大小来循环背景图像的方法。

阅读更多：CSS 教程

什么是cover和contain大小？

在CSS中，我们可以使用background-size属性来控制背景图像的大小。其中，cover和contain是两种常用的取值。

cover：背景图像将保持原始宽高比，在保持纵横比的同时填充整个容器，可能会被裁剪。
contain：背景图像将保持原始宽高比，同时完整地显示在容器内，可能留有空白区域。

使用cover大小循环背景图

如果我们希望使用cover大小循环背景图，我们可以使用以下CSS代码：

.selector {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  animation: loop 5s infinite;
}

@keyframes loop {
  0% {
    background-position: top;
  }
  100% {
    background-position: bottom;
  }
}

在上述代码中，我们首先设置容器的背景图像为image.jpg，并将背景重复关闭。然后，我们使用cover大小来调整背景图像的大小。接着，我们使用动画属性定义一个名为loop的动画，将背景图像从顶部移动到底部。最后，我们将动画的持续时间设置为5秒，并使其无限循环。

通过以上代码，我们就可以实现一个使用cover大小循环背景图的效果。

使用contain大小循环背景图

如果我们希望使用contain大小循环背景图，我们可以使用以下CSS代码：

.selector {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  animation: loop 5s infinite;
}

@keyframes loop {
  0% {
    background-position: left top;
  }
  100% {
    background-position: right bottom;
  }
}

在上述代码中，我们同样设置容器的背景图像为image.jpg，并关闭背景的重复。然后，我们使用contain大小来调整背景图像的大小。接着，我们使用动画属性定义一个名为loop的动画，将背景图像从左上角移动到右下角。最后，我们将动画的持续时间设置为5秒，并使其无限循环。

通过以上代码，我们就可以实现一个使用contain大小循环背景图的效果。

其他补充

我们还可以通过调整动画的间隔时间、起始位置和结束位置来实现不同的效果。通过使用CSS的@keyframes功能，我们能够自定义各种不同的循环背景图效果，以满足不同的需求。

总结

在本文中，我们介绍了如何使用CSS中的cover或contain大小来循环背景图像。通过设置背景图片的大小和使用动画属性，我们能够实现各种不同的循环背景图效果。无论是使用cover大小还是contain大小，都能够为我们的网页带来更加丰富的视觉效果。希望本文能对您理解和应用CSS中循环背景图的方式有所帮助。