background-size: cover本身不产生白边，白边源于容器未撑满视口、body默认margin、Flex子项高度塌陷、background-attachment: fixed在iOS失效，或filter: blur采样越界导致填充白色。
background-size: cover 本身不会产生白边；白边是容器尺寸、背景定位或模糊滤镜共同作用下的采样越界结果。
为什么 background-size: cover 在某些情况下显示白边
cover 只负责等比缩放图片至「短边填满容器」，它不控制容器是否真正撑满视口。白边常出现在以下真实场景中：
- 容器（如
section或div）未设min-height: 100vh或height: 100%，实际高度小于视口 → 图片按小容器缩放，边缘未覆盖区域留白 -
body有默认margin: 8px（Chrome/Safari），导致背景被“挤出”视口边界 - 背景设在子元素上，而父容器是 Flex/Grid 且未设
align-items: stretch或flex: 1，子元素高度塌陷 - 用了
background-attachment: fixed，但在 iOS Safari 中失效，滚动时背景位移，露出底部空白
filter: blur 导致白边的真正原因
当对带背景图的元素应用 filter: blur(10px) 时，浏览器需对边缘像素做高斯采样。若模糊半径超出背景图可采样范围（比如裁剪后边缘是透明/空白），就会用默认背景色（通常是白色）填充 —— 这就是白边的来源。
-
background-size: cover已裁剪掉部分图像，blur 向外扩散时无像素可取 → 填白 - 解决方案不是改 cover，而是扩大采样范围：
background-size: 150% 150%让背景多铺一圈，blur 有图可采 - blur 值较大（如 >10px）时，仅靠增大 background-size 不够，还需给
html或body设置相同背景图，确保模糊区域外也有像素源
如何验证和快速修复白边
先判断白边类型，再针对性处理：
立即学习“前端免费学习笔记（深入）”；
- 滚动时白边随内容移动 → 是容器高度不足，加
min-height: 100vh并确认html, body { margin: 0; height: 100%; } - 白边固定在视口四角，且用了
filter: blur()→ 改background-size为150% 150%，并确保background-position: center center - 只在 iOS 上出现 → 检查是否用了
background-attachment: fixed，换成position: fixed+z-index叠加一层<img>更稳 - 白边伴随文字模糊或图变虚 → 可能误用了
100% 100%替代cover，立刻换回cover并检查图片宽高比是否适配目标容器
最易被忽略的一点：cover 的裁剪位置由容器宽高比与图片宽高比的差值实时决定，同一张图在 iPhone 14 Pro（19.5:9）和桌面（16:9）下裁剪区域完全不同——别依赖“看起来没问题”，必须在目标设备上实测关键内容是否被切。
