background-size: cover 会等比缩放图片直至完全覆盖容器并居中裁切，导致边缘关键内容被切掉；需配合 background-position 精确锚定主体位置，响应式下应在不同断点重设该值。
background-size: cover 为什么会让背景图“切掉关键内容”
因为 cover 的行为是：等比缩放图片，直到**完全覆盖容器**，再居中裁切多余部分。如果设计稿里人物脸部、Logo 或文字区域刚好在图片边缘，缩放后就容易被裁掉。
- 常见于 banner 区域、卡片封面、登录页全屏背景
- 移动端竖屏时容器宽高比变化大，裁切位置和幅度更难预测
-
cover不关心“哪部分重要”，只保证填满——这是它设计初衷，不是 bug
用 background-position 精确锚定关键区域
配合 cover 使用 background-position，能强制让图片的某个坐标对齐容器中心。比如人脸在原图中偏上，就把 background-position 设为 center top 或具体像素值。
-
background-position: 50% 20%表示图片的横向 50%、纵向 20% 位置对齐容器中心点 - 优先用百分比而非
px，确保响应式下仍可计算 - 调试时可在浏览器 DevTools 中实时拖动
background-position值观察效果
section.hero {
background-image: url(./hero.jpg);
background-size: cover;
background-position: 50% 30%; /* 把原图中纵向 30% 的位置（如眼睛）对齐容器中心 */
}cover 和 contain 的选择不能只看“是否拉伸”
很多人以为“不想裁切就换 contain”，但 contain 会留白，且在窄屏下可能让图片缩得极小，失去视觉冲击力。真正需要的是：在可控裁切的前提下保主体。
-
contain：适合图标、徽标等必须完整显示的图形，不适合摄影类背景 -
100% 100%：强制拉伸，会变形，慎用 - 折中方案：
background-size: 120% auto+background-position: center，轻微放大降低裁切敏感度
响应式断点里要重设 background-position
同一张图在桌面端横屏和手机竖屏下，最佳可视区域往往不同。只设一次 background-position 很难兼顾所有尺寸。
立即学习“前端免费学习笔记（深入）”；
- 在
@media (max-width: 768px)里单独调整background-position - 例如桌面端用
50% 30%突出人物上半身，移动端改用50% 50%防止头顶被切 - 避免用 JS 动态计算 position——CSS 原生支持已足够，也更稳定
@media (max-width: 768px) {
section.hero {
background-position: 50% 45%;
}
}实际项目中最容易忽略的，是没把设计师提供的“焦点区域”坐标转成 CSS 百分比，而是凭感觉调。建议导出图片后用画图工具量一下关键元素距顶部/左侧距离，再除以原图高/宽，得到精确百分比。
