用vh/vw实现全屏背景需设min-height:100vh防截断，移动端用100dvh避Safari地址栏bug；background-size:cover留白因宽高比不匹配，应调background-position对齐；欢迎页宜用.relative容器包裹，避免直接设body背景。
用 vh 和 vw 让背景填满整个屏幕
视口单位是实现真·全屏背景最直接的手段，100vh 表示视口高度的 100%，100vw 是宽度。但光设 height: 100vh 不够——如果内容撑高了页面，滚动条出现，100vh 仍只按初始视口算，实际可能露出白边。
实操建议：
- 对根容器（比如
<body>或包裹层）设min-height: 100vh，而非height: 100vh，避免内容多时被截断 - 若需严格“一屏即满”，且不希望用户向下滚动，加
overflow: hidden，但要小心遮挡焦点元素或影响可访问性 - 移动端 Safari 对
vh有 bug：地址栏收放时vh值不更新，导致背景错位；此时可用100dvh（动态视口高度）替代，Chrome/Edge/Safari 16.4+ 支持
background-size: cover 为什么有时还是留白
留白不是 cover 失效，而是它只保证“完整覆盖”，不保证“无裁切”。当容器宽高比和图片宽高比不一致时，必然有一边溢出、被裁掉，另一边才刚好铺满。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 图片顶部/底部被切掉，但上下留白 —— 实际是图片被垂直居中了，而你期望它“顶对齐”
- 用
background-position: center（默认值）时，小图在大容器里会缩放后居中，四周留空
解决办法：
- 明确设
background-position: top center或bottom center控制对齐方式 - 确认图片本身分辨率足够高，否则
cover会放大模糊；推荐最小宽度 ≥ 1920px，高度 ≥ 1080px - 慎用
background-attachment: fixed，它在部分安卓 WebView 和 iOS 上触发渲染异常，背景可能卡住不动
全屏欢迎页的布局结构怎么写才不踩坑
欢迎页通常只有标题、按钮、背景图，看似简单，但 DOM 结构松散容易导致定位失效或响应错乱。
关键点：
- 不要把
background-image直接写在<body>上——某些框架（如 Next.js）或重置样式（如 normalize.css）会干扰body高度计算 - 推荐用一个全屏
<div class="hero">包裹所有内容，并设position: relative，方便内部绝对定位的按钮/文字 - 文字层用
position: absolute时，必须确保父容器有position: relative或position: fixed，否则会相对于html或最近定位祖先定位，结果飘走 - 如果欢迎页要支持深色模式，背景图最好选中性灰调，或用
@media (prefers-color-scheme: dark)单独换图
移动端适配中 background-size 的兼容性陷阱
老版本 Android Browser 和 iOS 12 以下对 cover / contain 的解析不一致，尤其在横屏切换时，背景可能突然缩放错乱。
能绕开就绕开：
- 不用
background-size: cover+background-attachment: fixed组合，这是兼容性最差的搭配 - 测试时真机横竖屏反复切换，看是否出现“闪白”或“背景跳动”——大概率是浏览器重绘失败，可加
will-change: background-position强制开启 GPU 加速（仅限现代浏览器） - 如果必须支持 iOS 11，考虑降级方案：用
object-fit: cover配合<img>标签代替背景图，更可控
真正难处理的不是怎么铺满，而是铺满之后，文字在不同设备上是否始终落在安全区内——这得靠 clamp() 配合视口单位做字体响应，或者用媒体查询分段控制 padding 和 top 偏移。
