如何通过CSS/HTML实现图片覆盖/拉伸铺满整个页面？

代码没有生效是三个关键配置缺失导致的：

• 仅给body设置了width: 100%，默认状态下body高度由内部内容撑开，不会自动和浏览器视口高度对齐，内容高度不足时页面下半部分不会显示背景
• 没有配置背景尺寸规则，背景图默认以原始像素尺寸渲染，不会自动拉伸适配容器
• 没有清除浏览器默认给body添加的8px外边距，即使背景铺满，页面边缘也会残留白边

/* 重置基础样式，让html和body完全撑满整个浏览器视口 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background-image: url("web.png");
  background-repeat: no-repeat;
  /* 核心属性：背景图等比例缩放至完全覆盖容器，无留白 */
  background-size: cover;
  /* 以顶部居中为基准定位背景，避免图片核心内容被裁剪 */
  background-position: center top;
  /* 如果需要背景固定不随页面滚动移动，取消注释下面这行即可 */
  /* background-attachment: fixed; */
}

你可以根据实际需求调整background-size的取值，切换不同的铺满逻辑：

• background-size: cover：保持图片原始宽高比，缩放至图片完全覆盖容器，不会出现留白，宽高比不匹配时会裁剪图片边缘，是全屏背景的最常用方案
• background-size: 100% 100%：强制拉伸图片匹配容器的宽高，图片会完全铺满容器不会被裁剪，但宽高比不匹配时图片会变形
• background-size: contain：保持图片原始宽高比，缩放至图片完整显示在容器内，宽高比不匹配时容器两侧/上下会出现留白

内容的提问来源于stack exchange，提问作者hth_zard