最常见的原因是html和body未设置height: 100%，导致背景容器高度塌陷，background-size: cover只能按错误高度缩放；需同时设置html{height:100%}和body{height:100%;margin:0;padding:0}。
background-size: cover 为什么没填满整个窗口
最常见的情况是 html 和 body 没有显式高度，导致背景图的“容器”实际高度为 0 或内容高度，background-size: cover 就只能按这个错误高度缩放。浏览器默认不给 html 和 body 设 height: 100%，所以即使写了 height: 100vh 在子元素上，父级塌陷也会让效果失效。
实操建议：
- 必须同时设置
html { height: 100%; }和body { height: 100%; margin: 0; padding: 0; } - 如果用
div做背景容器（比如#hero），该div要设height: 100vh，且父级不能有overflow: hidden或transform等触发新层叠上下文的属性干扰渲染 - 避免在
body上直接写background-attachment: fixed后又用cover——Safari 在 iOS 15.4 之前对此组合重绘异常，滚动时可能留白或卡顿
cover 和 contain 切换时视觉跳变怎么避免
从 cover 切到 contain（或反之）时，图片会突然缩放、位移，尤其在动画或媒体查询切换中特别明显。这不是 bug，而是 CSS 渲染机制：两者缩放基准不同，cover 以短边撑满，contain 以长边适配，中间没有插值过渡。
实操建议：
- 不要直接在媒体查询里改
background-size值，改用 JS 动态切换 class，并配合transition: background-size 0.3s ease（仅部分浏览器支持平滑过渡，Chrome/Edge 可用，Safari 不支持background-size过渡） - 更稳的方式是用两个重叠的
div，一个用cover，一个用contain，通过opacity和z-index控制显隐，避免尺寸重算 - 如果必须用单个元素，优先选
cover—— 它在绝大多数视口比例下更稳定；contain只在明确要求“全图可见+留白可接受”时才用，比如产品说明书页
移动端 Safari 下 background-size 失效怎么办
iOS Safari 在地址栏收起/展开时会动态改变 vh 实际值，但背景图不会自动重绘，导致 background-size: cover 在 height: 100vh 容器里“卡住”，出现顶部或底部白边。这不是代码写错，是 Safari 的视口事件未触发样式重计算。
实操建议：
- 放弃纯 CSS 方案，改用 JS 监听
resize并强制刷新：el.style.backgroundSize = 'cover'（注意不是设新值，是重新赋相同值触发重绘） - 用
height: 100dvh替代100vh（2023 年起 Safari 支持，dvh是“动态视口高度”，能响应地址栏变化） - 对老版本 Safari（iOS 15.3 及更早），fallback 到
height: 100%+min-height: 100vh，并确保父级有明确高度链
高清屏背景图发虚，怎么配 @2x 图
CSS 背景图不会自动适配设备像素比（DPR），Retina 屏会把 1× 图拉伸渲染，导致模糊。这不是分辨率问题，是浏览器没加载更高密度资源。
实操建议：
- 准备两套图：
bg.jpg（1×）和bg@2x.jpg（2×，宽高均为 2 倍），放在同一目录 - 用媒体查询切换：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body { background-image: url('bg@2x.jpg'); } } - 更彻底的方案：直接用 SVG 背景（如渐变、几何图案）或 WebP 格式（体积小、支持多分辨率 hint），避开位图缩放失真
background-image 还是 <img> —— 前者不进文档流、无法懒加载、无障碍支持弱；后者要额外处理 object-fit 和容器尺寸联动。很多“无缝切换”问题，根源其实是语义错配。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
