[分享]css中body背景图片显示不全

在CSS中，我们可以使用backgroundimage属性设置背景图片。然而有时候我们会发现，在使用backgroundimage属性为body元素设置背景图片时，图片并没有完全显示在页面上，即使我们...

在CSS中，我们可以使用background-image属性设置背景图片。然而有时候我们会发现，在使用background-image属性为body元素设置背景图片时，图片并没有完全显示在页面上，即使我们已经设置了大小为cover或100%。

body {
  background-image: url('example.jpg');
  background-size: cover;
} 

造成这个问题的原因是因为body元素的高度并没有撑满整个网页，只占了一部分高度。所以背景图片没有完全显示出来。

解决方法就是将html和body元素的高度都设为100%，这样就可以完全覆盖整个页面，背景图片也可以完全显示出来了。

html, body {
  height: 100%;
}

body {
  background-image: url('example.jpg');
  background-size: cover;
} 

当然，这并不是完全解决该问题的唯一方法。对于一些不同的情况和网页布局，我们可能需要采取其他的解决方法。但对于背景图片没有完全覆盖整个页面的情况，这种解决方法是最常见和最有效的。