CSS滚动条覆盖body背景的适配问题求助

这个问题我之前也碰到过，核心是浏览器对<body>元素背景的特殊处理机制在搞鬼：

默认情况下，如果<html>没设置背景，浏览器会把<body>的背景自动提升为整个视口的背景——这时候背景会覆盖包括滚动条在内的所有区域，所以桌面端一开始表现正常。但一旦你给<body>加上background-size: cover这类具体的背景尺寸属性，这个特殊的提升机制就失效了。此时<body>的背景就只会局限在它自己的元素盒子里，而<body>的宽度默认是视口宽度减去滚动条宽度，所以背景图就会在滚动条位置留白；至于背景色能铺满，大概率是你要么把背景色设在了<html>上，要么浏览器对背景色的处理逻辑和背景图不一样。

最靠谱的修复方法 #

把背景样式从<body>移到<html>上就搞定了——因为<html>是视口的直接容器，滚动条本身就属于<html>的范围，这样背景图会自然覆盖整个视口（包括滚动条），移动端也能保持cover的适配效果：

/* 把背景放在html上，让它覆盖整个视口 */
html {
  min-height: 100%;
  background: url('你的背景图路径') no-repeat center center;
  background-size: cover;
}

/* 重置body的默认边距，避免内容错位 */
body {
  margin: 0;
  min-height: 100%;
  /* 如果需要body单独的背景色，在这里加就行，或者直接继承html的 */
}

备选方案（如果必须保留body背景） #

要是因为项目限制不能把背景移到html上，也可以强制让<body>的宽度覆盖整个视口（包括滚动条），但要注意避免水平滚动条：

body {
  width: 100vw;
  min-height: 100vh;
  background: url('你的背景图路径') no-repeat center center;
  background-size: cover;
  overflow-x: hidden; /* 防止100vw触发水平滚动条 */
}

不过还是第一种方法更符合浏览器规范，也不容易踩坑。试一下这个设置，不管桌面端有滚动条还是移动端小屏幕，背景图都会铺满整个视口，滚动条也会正常覆盖在背景上面，完全符合你想要的效果~

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