background-size: cover 是让背景图等比缩放至短边刚好填满容器并裁剪溢出部分，不是让图片宽度自适应或拉伸变形；它保持原始宽高比，需配合 background-position 控制裁剪区域，并依赖容器有明确高度（如 min-height: 100vh）才能生效。
background-size: cover 是什么，不是什么
background-size: cover 不是“让图片宽度自适应”，而是让背景图等比缩放，直到**短边刚好填满容器**，再裁剪掉超出部分。它不改变图片原始宽高比，也不拉伸变形——这点和 100% 100% 有本质区别。
常见误解是把它当“响应式万能解”，结果首页 banner 在 iPhone 上切掉人脸、在 iPad 上裁掉 logo 文字。关键要明白：cover 的目标是「覆盖」，不是「适配内容」。
- 适用场景：全屏横幅、视差滚动背景、氛围感卡片
- 不适用场景：含文字/图标的关键信息图、需要精确对齐的徽标、窄长比例图（如 1920×100）
- 必须搭配
background-repeat: no-repeat，否则裁剪失效
为什么 background-size: cover 有时不生效
最常被忽略的原因是：**容器没有高度**。比如只写 div { background-image: url(bg.jpg); background-size: cover; }，但没设 height 或 min-height，浏览器渲染时该元素高度为 0，背景图根本无处绘制。
不同场景下补高度的方式不一样：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 全屏背景：用
min-height: 100vh（注意不是height: 100vh，防内容溢出时被截断） - Flex 布局子项：父容器加
display: flex，子项加flex: 1 - 纯文字容器：设
padding或line-height建立基础高度，别依赖内容撑开 - body 元素：确保
html, body { height: 100%; }，否则100vh可能计算异常
cover 裁剪位置怎么控制
浏览器默认以图片中心为锚点裁剪，但多数设计图的视觉焦点不在正中——人像偏左、logo 靠上、标题在顶部区域。不干预的话，cover 很容易切掉关键内容。
用 background-position 显式指定裁剪基准点：
-
background-position: center top—— 把图片顶部对齐容器顶部，适合 banner 标题在上方的场景 -
background-position: 20% 30%—— 百分比值从左到右、从上到下，更精细控制 -
background-position: right bottom—— 适合右下角有水印或签名的图 - 移动端常设
center bottom，防止文字区域被裁掉
注意：background-position 必须和 cover 同时存在才起作用；单独设它对 contain 影响很小。
移动端和高清屏的坑怎么绕
很多“模糊”问题其实不是 CSS 写错，而是图本身扛不住缩放。一张 800×400 的图，在 iPhone 15 Pro Max 上用 cover 拉到 1290×2796，必然糊成一片。
- 提供至少 2x 分辨率图（如
bg@2x.jpg），用srcset或媒体查询切换，而不是只靠 CSS 缩放 - 避免极端宽高比图片做全屏背景，比如 1920×100 的细长图，横向拉伸后纹理全失
- iOS Safari 对
background-attachment: fixed支持不稳定，易触发重绘模糊，优先用scroll（默认值） - 慎用
background-attachment: local，兼容性差，且在某些安卓 WebView 中表现异常
真正难的不是写对那几行 CSS，而是选对图、控好裁剪点、预判不同设备下的裁剪结果——这些没法靠自动工具判断，得手动在真机上多测几次。
