background-repeat: no-repeat 会放大白边，因其停止平铺后暴露容器与图片尺寸不匹配产生的空白；真正原因是 html/body 默认样式（如 margin: 8px、未设高度）及布局溢出，需重置根元素并配合 background-size、background-position 和底色填充综合解决。
为什么 background-repeat: no-repeat 会放大白边而不是消除它
单独设置 background-repeat: no-repeat 不仅不能解决白边，反而会让问题更明显——因为图片不再平铺，一旦容器尺寸与图片原始宽高不匹配（尤其是缩放后），空白区域就彻底暴露出来。移动端缩放时视口计算变化，body 默认 margin: 8px 被放大，加上未约束的背景图定位偏移，共同形成上下/左右可滚动的白边区域。
真正起效的三行重置 CSS
白边根源不在背景图本身，而在根元素布局失控。必须从 html 和 body 层级切断默认行为：
-
html { height: 100% }—— 确保根元素高度可继承 -
body { margin: 0; min-height: 100vh; padding: 0; box-sizing: border-box; }—— 清除默认外边距、撑满视口、防止盒模型溢出 - 所有含背景图的容器需显式设
width: 100%; height: 100%;或固定尺寸，避免依赖内容撑开
background-size 选 cover 还是 contain？看场景
两者对白边影响截然不同：
-
background-size: cover：强制填满，但会裁剪边缘——适合全屏海报类背景，缩放时可能切掉关键内容 -
background-size: contain：完整显示，但留白不可避免——适合 logo、图标类背景，缩放后白边位置可控（可用同色background-color覆盖） - 若用
no-repeat，必须搭配background-position: center center+background-color填充底色，否则白边裸露
缩放后右侧/底部突然出现白边？先查 overflow 和子元素
这不是背景图的问题，而是布局溢出被浏览器渲染为可滚动区域：
- 检查是否有子元素（如
img、div）宽度超过父容器，且未设max-width: 100%或overflow: hidden - 禁用
overflow-x: hidden在body上——它只隐藏滚动条，不阻止实际溢出，iOS Safari 中还可能导致触摸失效 - 侧滑菜单等绝对定位元素，必须包裹在
position: relative; overflow: hidden的父容器内，否则右移负值会直接撑宽视口
最易被忽略的是：缩放白边往往由多个小问题叠加而成——body 的 8px margin、未重置的 box-sizing、一张没加 max-width: 100% 的图片、一个忘记设 overflow: hidden 的滚动容器。修复必须逐层排查，不能只盯着 background-repeat。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
