css背景repeat有缝隙

在CSS中，使用背景图片时，我们通常会设置一个repeat属性，让图片能够完全覆盖背景。然而，有时候我们会发现，图片重复时会出现一些奇怪的缝隙。

这种情况通常是由于图片的大小问题造成的。如果图片的宽度和高度不是整数倍，则会在重复时出现间隙。例如，一个宽度为101像素，高度为60像素的图片，我们想要在背景中上下重复，代码如下：

body {
  background-image: url("bg.png");
  background-repeat: repeat-y;
}
 

在这种情况下，当图片沿着垂直方向重复时，会在相邻的两个图片之间出现一个像素的间隙。

为了解决这个问题，我们可以使用一些技巧。一种方法是在图片的边缘增加一些额外的像素，使其大小变成整数倍。另一种方法是使用CSS3中新加入的background-size属性。这个属性允许我们拉伸或压缩背景图片的大小，使用background-size: cover可以确保图片完全覆盖背景。

body {
  background-image: url("bg.png");
  background-repeat: repeat-y;
  background-size: cover;
}
 

如果我们还有其他需要重复的方向，可使用相应的属性（如repeat-x）进行控制，同样需要注意图片大小的问题。

现在我们知道了CSS背景图片有缝隙的问题是如何产生的，以及如何解决这个问题的方法。在实际开发中，我们需要根据具体情况选择使用什么方法，以获得最佳的显示效果。