css如何使背景图片不留白

当我们在使用CSS添加背景图片时，可能会出现图片和内容之间留有白边的情况。这是因为浏览器默认背景颜色为白色，而背景图片又没有完全填充满背景，所以就出现了白边。

那么如何避免这种情况呢？

body {
  margin: 0;
  padding: 0;
  background: url("bg.png") no-repeat center center fixed;
  background-size: cover;
}

通过添加background-size: cover;属性，可以保证背景图片完全覆盖背景而避免白边的出现。此外，将body的margin和padding设置为0也可以保证背景图片与浏览器边缘对齐。

如果我们只想调整某个元素的背景图片，可以使用类似以下的CSS代码：

.container {
  background: url("bg.png") no-repeat center center;
  background-size: cover;
}

注意，如果不设置background-size属性，背景图片将默认按照原始尺寸进行显示，可能出现缩放或显示不全的问题。

另外，需要注意的是，如果背景图片本身包含透明部分，可能会影响到页面内容的可读性。

综上所述，通过添加background-size: cover;属性，可以有效避免背景图片与内容之间留白的问题。对于只需要调整某个元素的背景图片的情况，只需要在该元素上使用类似background-size的属性即可。