background-size: cover未填满视口主因是元素未撑满视口尺寸；应使用position: fixed配合四边锚定，或伪元素实现真正全屏背景。
background-size: cover 为什么没填满整个视口
直接设 background-size: cover 但背景图只铺满内容区域，不是全屏，大概率是元素没撑开到视口尺寸。CSS 背景作用在哪个元素上，就只在这个元素的盒模型范围内渲染。如果父容器高度只有 auto（比如空的 <div>），那再怎么 cover 也盖不住屏幕。
fixed 定位实现全屏背景的正确写法
用 position: fixed 脱离文档流，再锚定四边，是最稳妥的全屏背景方案——它不依赖父容器尺寸，也不受滚动影响。
- 必须同时设置
top: 0、right: 0、bottom: 0、left: 0，缺一不可；只设top和left会导致宽度/高度不足 - 推荐用伪元素（如
::before）承载背景，避免污染语义结构；主内容层用z-index盖在上面 - 加上
content: ""和display: block，否则伪元素不渲染
body::before {
content: "";
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: url(./bg.jpg) center/cover no-repeat;
z-index: -1;
}
width/height 设 100vw/100vh 的隐患
看似简单：给背景容器设 width: 100vw、height: 100vh。但实际容易出问题：
-
100vh在移动端 Safari 中可能把地址栏高度算进去，导致背景溢出或滚动条出现 - 如果页面有垂直滚动，
100vh容器不会随滚动“贴住”视口，背景会跟着页面一起动（不是真正固定） - 当存在
scrollbar-gutter或自定义滚动条时，100vw可能略大于可视宽度，造成轻微横向滚动
需要响应式适配时的关键点
全屏背景在不同设备上常需微调，重点不在“铺满”，而在“关键内容不被裁切”：
立即学习“前端免费学习笔记（深入）”；
- 用
background-position控制焦点区域，例如center top保留言语区可见 - 小屏下可配合媒体查询改用
background-size: contain防止主体被截断 - 避免对
background-image做transform: scale()，会触发重绘且模糊；优先用cover+position调整
真正麻烦的不是铺满，而是滚动时背景是否“粘”在视口上、缩放后图像是否仍清晰、暗色模式下是否漏出底色——这些细节比一开始写的那几行 CSS 更耗时间调试。
