background-size: cover本身不拉伸变形，而是等比缩放后裁剪；所谓“糊”或“切重点”源于容器高度失控、background-position未精准锚定关键区域，或误用100% 100%。
background-size: cover 本身不会导致变形——它强制等比缩放，所以图永远不会被拉伸。所谓“变形”，90%是裁剪失控或容器没约束好，剩下10%是误用了100% 100%或auto。
为什么写了 cover 还是看起来“糊”或“切掉重点”
cover 的行为很确定：等比缩放图片，直到短边刚好填满容器，长边溢出 → 必然裁剪。它不识别人脸、logo 或文字区域，只认宽高比。
- 图片宽高比（比如 4:3）和容器宽高比（比如手机竖屏 19.5:9）不一致时，裁剪位置由
background-position决定，不是随机的 - 如果没显式写
background-position，浏览器按默认50% 50%居中裁剪，但某些安卓内核对百分比解析有偏差，建议写center center - 容器高度塌陷（如
height: auto或 flex 子项未设align-items: stretch）会导致 cover 缩放基准错乱，图可能只显示顶部一截
必须写的三行基础样式才能让 cover 真正生效
漏掉任意一条，cover 就失去作用对象：
-
html, body { margin: 0; padding: 0; }—— 清除浏览器默认margin: 8px，否则背景被挤出视口 -
html { height: 100%; }—— 给根元素明确高度参照；比body { height: 100vh; }更稳，避开 iOS 地址栏收放抖动 -
html { background: url("bg.jpg") no-repeat center center / cover; }—— 背景必须挂载在html上，不是body或某个div；center center / cover是简写，语义清晰且兼容性好
移动端和高清屏最容易踩的坑
iPhone 15 Pro 加载一张 4K 图，结果模糊；低端安卓却下了一大张图——这不是 cover 的问题，是分辨率没适配。
- 用
image-set()提供多倍图：background-image: image-set( url(img/bg-1200.jpg) 1x, url(img/bg-2400.jpg) 2x ); - 避免仅靠
100vh控制高度，Safari 滚动时地址栏收放会触发高度跳变；优先用html { height: 100%; }+body { min-height: 100vh; } -
background-attachment: fixed在 iOS Safari 上有性能卡顿，且旧版本直接失效；如需固定效果，改用position: fixed叠加一层<img>更可靠
cover 和 contain 到底怎么选
别凭感觉，看使用场景：
- 选
cover：头图、Banner、纯视觉图，允许裁剪边缘（如风景、渐变、纹理），目标是“填满无留白” - 选
contain：图标、带文字的说明图、需要完整信息的图，目标是“全貌可见”，可接受上下/左右留白 - 禁用
100% 100%和auto：前者强制拉伸必变形，后者行为不可控（各浏览器解释不同）
真正难的不是写对 cover，而是判断这张图到底适不适合用 cover；构图偏、关键内容靠边缘、含文字信息的图，硬上 cover 只会放大问题。调一次 background-position，测三台真机，比堆一堆 hack 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
