17370845950

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 百分比，而是凭感觉调。建议导出图片后用画图工具量一下关键元素距顶部/左侧距离，再除以原图高/宽，得到精确百分比。