图片未铺满全屏的根本原因是元素自身未占满视口，需确保目标元素（如html、body或容器）设height:100vh且margin:0，同时注意层叠上下文与移动端渲染差异。
background-size: cover 为什么图片还是没铺满全屏
根本原因不是 background-size 没生效，而是元素本身没占满视口。CSS 背景图只作用于它所绑定的元素盒模型范围，如果这个元素高度只有 20px，再设 cover 也撑不开。
常见错误现象：body 或 div 上写了 background-image 和 background-size: cover，但页面顶部/底部留白，图片被裁切或缩在中间。
- 确保目标元素（比如
html、body或某个全屏容器）高度至少为100vh，且没有外边距或默认margin干扰 -
html和body默认有margin，必须显式设margin: 0 - 若用
div做全屏容器，别只靠内容撑高，要加height: 100vh或min-height: 100vh - 避免父容器有
overflow: hidden或transform，它们可能触发新层叠上下文或改变尺寸计算逻辑
用 background-attachment: fixed 时滚动错位怎么办
这是视差滚动的经典陷阱：固定背景在某些浏览器（尤其是 Safari 和部分安卓 WebView）中会因渲染优化导致背景图相对视口偏移，尤其在页面有缩放、字体加载或动态插入内容后更明显。
使用场景：想实现“背景不动、内容滚动”的视觉效果，但发现图片突然跳动或对不齐边缘。
立即学习“前端免费学习笔记（深入）”；
- 优先改用
background-attachment: scroll+background-size: cover+height: 100vh容器模拟固定效果，更稳定 - 若坚持用
fixed，需配合background-position: center center和background-repeat: no-repeat，避免定位漂移 - Safari 中可加
-webkit-transform: translateZ(0)强制硬件加速，缓解错位（但不能根治） - 注意：
fixed在移动端常被禁用或降级，iOS Safari 15+ 才较可靠支持
全屏背景图在不同设备上拉伸变形或裁切过度
cover 保证填满但必然裁切，contain 保证完整但留黑边——这不是 bug，是 CSS 背景机制的设计逻辑。关键在于选对策略，而不是调参数硬扛。
性能影响：大图 + cover 在低端设备上可能触发频繁重绘；background-position 动态变化时更明显。
- 用
background-size: cover时，搭配background-position: center（默认值），避免顶部重要内容被裁掉 - 若主体是人像或 logo，改用
background-position: top center或bottom center控制裁切区域 - 响应式建议：用媒体查询切换
background-size，小屏用100% auto保主体，大屏再切回cover - 图片本身宽高比尽量接近 16:9 或 4:3，减少极端裁切；避免上传竖构图原图直接当全屏背景
HTML 元素层级和 background 图层顺序搞混了
背景图永远在元素内容之下，但它不会自动压住其他兄弟元素——除非你用 z-index 明确控制堆叠上下文。很多人以为设了全屏背景就“盖住一切”，结果发现导航栏、弹窗浮在上面，却找不到哪里漏了 position。
容易踩的坑：给 body 设背景，又给 .header 设 position: relative，但没设 z-index，导致 header 文字被背景图“吃掉”（其实是透明背景下文字照常显示，只是对比度低）。
- 背景图本身无
z-index，它只属于所在元素的“背景层”，层级最低 - 若要让背景图真正“垫底”，推荐新建一个
div作为全屏背景容器，position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1 - 注意：
z-index: -1的元素无法响应点击事件，如需交互，改用pointer-events: none - 不要给
html或body设z-index，它们不是定位元素，默认不参与层叠上下文
最麻烦的从来不是怎么写那几行 CSS，而是得同时盯住盒模型高度、背景定位锚点、层叠上下文创建条件、还有移动端渲染差异——少盯住一个，图就铺不满、错位、或者干脆看不见。
