(css background 充满自适应) CSS实现背景图片全屏铺满自适应的3种方式 CSS背景图片全屏铺满自适应方法全网首发(图文详解1)

CSS可以通过以下三种方式实现背景图片全屏铺满自适应：

这是最常见的方法，能够使背景图片全屏显示，同时图片也将保持其宽高比并会尽可能的铺满容器。

代码示例：

body {
  background-image: url('xxx.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

这种方法会将图片拉伸或压缩以填充容器大小。注意，该方法会改变图片的宽高比。

代码示例：

body {
  background-image: url('xxx.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

这种方法使用了视口单位（vw/vh），宽度和高度分别按照视口的宽度和高度进行计算。此方法也可能改变背景图片的宽高比。

代码示例：

body {
  background-image: url('xxx.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100vw 100vh;
}

注：xxx.jpg 需要替换为你的图片路径。

为了让图片全屏铺满，你可能还需要确保页面的 <body> 和 <html> 宽高为100％。你可以这样实现：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}