CSS 背景全屏

在Web开发中，经常需要在页面中添加背景，并且使背景全屏展示。下面介绍几种实现方法。

1. 使用background-size属性

通过将background-size属性设置为cover，可以实现背景全屏展示。

body {
  background-image: url("your-image-url");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

其中，background-image用于指定背景图片的URL地址，background-size用于指定背景图片的尺寸，cover表示该图片将完全覆盖背景区域。background-repeat用于指定背景图片是否重复，background-position用于指定背景图片在背景区域中的位置。

2. 使用vw和vh单位

通过将background-size属性设置为100vw和100vh，可以实现背景全屏展示。

body {
  background-image: url("your-image-url");
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  background-position: center center;
}

其中，100vw表示背景图片在水平方向上占据整个屏幕的宽度，100vh表示在竖直方向上占据整个屏幕的高度。

3. 使用JavaScript动态设置背景图片大小

<style>
  body {
    background-image: url("your-image-url");
    background-repeat: no-repeat;
    background-position: center center;
  }
</style>
<script>
  function resizeBackground() {
    var img = new Image();
    img.onload = function() {
      var width = this.width;
      var height = this.height;
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;
      var widthRatio = screenWidth / width;
      var heightRatio = screenHeight / height;
      var ratio = Math.max(widthRatio, heightRatio);
      width *= ratio;
      height *= ratio;
      document.body.style.backgroundSize = width + "px " + height + "px";
    }
    img.src = "your-image-url";
  }

  window.onload = resizeBackground;
  window.onresize = resizeBackground;
</script>

其中，JavaScript代码会动态加载图片，并根据屏幕大小计算出背景图片应该显示的大小，在窗口大小变化时重新计算背景图片大小。

以上三种方法均可以实现背景全屏展示，根据实际需求选择不同的方法即可。