如何实现body背景图全屏

对于网页设计，全屏背景图片是现在很常见的一种设计方式。在这篇文章中，我们将会学习如何实现body背景图全屏。

一、CSS background-size实现

CSS的background-size属性可以控制背景图片的尺寸大小。其中有一个特殊的值“cover”，它可以让背景图片自适应容器，并充满容器。我们可以将这个方法应用到body元素上，实现全屏图片：

body {
  background: url('背景图片路径') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

上述代码中，我们在body元素上设置了背景图，并且使用了cover属性，使背景图充满整个屏幕。

然而这个方法仅能保证图片充满容器，而不能保证图片完整地呈现在容器中。如果图片的长宽比例与容器不同，那么图片有可能被裁剪掉一部分，不够美观。

二、CSS vh和vw单位实现

CSS提供了vh和vw单位，用于表示视口（viewport）的高度和宽度。视口是浏览器中用于展示网页的区域，vh和vw表示的是相对于视口大小的比例。

我们可以使用这两个属性来让背景图片充满整个屏幕，同时不会被裁剪。比如，我们可以设置：

body {
  margin: 0;
  padding: 0;
  background: url('背景图片路径') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

这样做会让body元素的高度和宽度分别等于视口的高度和宽度，同时背景图片充满整个屏幕。

三、 JavaScript调整图片高度实现

如果实在无法确定背景图片长宽比例并希望图片完整显示，还可以使用JavaScript来调整图片高度。假设我们已经在html中添加了一个名为“bg-img”的img标签，代码如下：

我们可以使用以下的JavaScript代码调整图片高度：

var img = document.getElementById('bg-img');
img.style.height = window.innerHeight + 'px';

上述代码中，我们选择了id为“bg-img”的图片元素，并将其高度设置为视口高度。“window.innerHeight”表示视口高度。

四、实现方法选择

以上三种方法都可以实现全屏背景图片，但是如果背景图片与容器的长宽比例不同，那么第二种方法可以让图片完整呈现。同时，如果需要做一些响应式的处理，那么使用JavaScript也可以确保图片在不同屏幕大小下呈现的完整性。

因此，在选择实现方法时需要根据具体情况进行选择。