background-size: cover 在小屏上裁切关键内容，因其等比缩放填满容器却不保证主体居中可见；需配合 background-position（如 center center 或 top center）手动控制可视区域，并通过媒体查询分段设置缩放行为，同时确保源图分辨率足够。
background-size: cover 为什么在小屏上切掉了关键内容
因为 cover 的逻辑是“等比缩放填满容器”，不保证主体居中可见——尤其当背景图宽高比和容器差异大时，顶部/底部常被裁掉。常见于手机端 banner 图文字被砍掉一半。
- 优先用
background-position: center center锁定视觉中心，再配cover - 若图中关键信息在顶部（比如 logo + 标题），改用
background-position: top center，但需配合足够高的容器或内边距留白 - 不要依赖
cover自动适配；先确认设计稿里“安全区域”在哪，再手动调background-position
如何让背景图在不同断点下缩放行为不同
响应式背景缩放不是靠一个属性搞定的，得靠媒体查询分段控制 background-size 和 background-position。
- 桌面端用
cover填满全宽，移动端可改用contain确保整图可见（适合信息图类背景） - 中屏（如 iPad）常用
100% auto：宽度拉满，高度按比例自适应，避免拉伸变形 - 注意
background-size的值必须成对出现（如100% 100%），单值如100%等价于100% 100%，不是“只设宽度”
background-size 配合 background-attachment: fixed 在移动端失效
加了 fixed 的背景在 iOS Safari 和部分安卓浏览器里会直接退化为 scroll，且 cover 缩放可能错位。这不是 bug，是性能策略：视差滚动开销大，系统主动降级。
- 真要实现视差效果，用
transform: translateY()+ 滚动监听，而不是background-attachment - 如果只是想让背景不动，检查是否误加了
fixed—— 大多数响应式头部根本不需要它 -
background-attachment: local在支持它的浏览器里更可控，但兼容性弱，慎用
图片本身尺寸不够大，响应式缩放后变模糊怎么办
缩放本质是拉伸像素，background-size: cover 在 2x 屏或大屏上会放大原图，分辨率不足就糊。这不是 CSS 能解决的，得从资源源头控制。
- 提供至少 2 倍于最大容器宽度的图（比如最大容器宽 1440px，图至少 2880px 宽）
- 用
@media (-webkit-min-device-pixel-ratio: 2)单独换高清图，或直接上image-set()（注意 Safari 支持度） - SVG 背景无损缩放，但仅限图形类；照片类别无选择，只能换图
最常被忽略的是：设计师给的“一张图适配所有设备”根本不可行。缩放逻辑再准，源图分辨率不够，一切白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
