CSS实现适配视口的全屏背景图 解决cover/contain适配异常问题

问题核心说明 #

你之前测试的两个background-size属性本身的表现完全符合规范：

• cover：保持图片原始宽高比，缩放至完全铺满容器，超出容器的图片边缘会被裁剪，这是全屏无留白背景的标准实现属性
• contain：保持图片原始宽高比，缩放至图片完整显示在容器内，当图片和容器宽高比不匹配时必然出现留白

注意：不存在CSS方案可以同时实现「图片100%完整无裁剪」+「任意屏幕比例下完全铺满无留白」，只要图片比例和用户设备视口比例不匹配，两个效果只能二选一。标准全屏背景效果本身就是采用cover实现，接受边缘适度裁剪换取全视口无留白的体验。

你之前的代码有3个缺失点：

• 未添加background-attachment: fixed属性，无法实现背景固定、不随页面内容滚动的效果
• 未重置浏览器默认样式，body自带的8px外边距会导致边缘留白、尺寸计算偏差
• 给html设置固定height: 100%会导致内容超出视口高度时背景显示异常，也无法适配移动端浏览器地址栏的高度变化

可直接运行的完整代码 #

CSS 代码（styles.css） #

/* 全局重置浏览器默认边距，避免默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* 用动态视口单位适配全端高度，兼容移动端地址栏伸缩场景 */
  min-height: 100dvh;
  width: 100%;
  background-image: url(https://i.sstatic.net/3Xdg1.jpg);
  /* 背景始终居中对齐 */
  background-position: center center;
  background-repeat: no-repeat;
  /* 缩放至铺满视口 */
  background-size: cover;
  /* 核心属性：背景绑定视口，不随内容滚动 */
  background-attachment: fixed;
}

body {
  min-height: 100%;
  width: 100%;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <title>个人网站</title>
</head>
<body>
  <!-- 在此处添加你的页面内容即可，滚动内容时背景将保持固定 -->
</body>
</html>

关键属性作用说明 #

• background-attachment: fixed：将背景图的定位参考系从html节点改为浏览器视口，实现内容滚动时背景位置不动的效果
• min-height: 100dvh：替代固定高度设置，内容不足一屏时撑满视口，内容超出一屏时自动适配高度，同时解决移动端浏览器地址栏收起/展开导致的背景错位、底部留白问题
• 全局边距重置：清除浏览器默认给body添加的8px外边距，避免页面四周出现无意义白边

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