CSS3 background-size 属性完全指南：cover、contain 与自适应适配

在响应式网页设计中，背景图片的处理直接决定了首屏视觉质感。background-size 彻底解决了以往背景图被裁切或拉伸变形的痛点。本文解析其各个取值的核心表现。

一、 常用取值与表现行为

• background-size: cover;（全屏铺满）：等比例缩放图片，直至完全覆盖容器的所有区域，超出部分会被裁剪，确保绝不留白；
• background-size: contain;（完整容纳）：等比例缩放图片，直至完整显示在容器内，适合展示 Logo 或完整产品图，可能会留有空白边；
• background-size: 100% 100%;（非等比拉伸）：强制铺满宽高，图片会被拉伸变形（慎用）。

二、 全屏 Hero 封面黄金组合代码

.hero-banner {
    background-image: url('cover.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}