css背景图空白

在使用 CSS 设置背景图时，可能会出现图像出现空白的情况。

首先，我们要确定背景图的路径是否正确。如果路径不正确，即使图片存在也无法显示。可以使用相对路径或绝对路径。例如，相对路径可以是“../images/bg.jpg”，绝对路径可以是“http://example.com/images/bg.jpg”。

body {
  background-image: url('../images/bg.jpg');
}
 

其次，我们要检查背景图像素是否过大或过小。如果像素过大，浏览器会尝试拉伸图片以适应背景区域，导致图片变形或失真。而如果像素过小，图片会在背景区域内显示不完整。

div {
  background-image: url('../images/bg.jpg');
  background-size: cover;
}
 

最后，我们还要考虑是否允许背景图重复。默认情况下，如果背景图像素小于背景区域，则会重复出现，使整个背景区域被覆盖。可以使用 background-repeat 属性设置背景图不重复。

div {
  background-image: url('../images/bg.jpg');
  background-repeat: no-repeat;
}
 

综上，通过检查路径、像素大小和重复情况，可以解决 CSS 背景图空白的问题。