背景尺寸属性
最后更新：2026-09-13
background-size 背景尺寸属性
background-size 属性用于控制背景图像的尺寸，是 CSS3 新增的属性。它支持 auto（原始尺寸）、cover（覆盖整个容器）、contain（完整显示在容器内）以及具体的长度和百分比值。该属性在响应式设计中非常实用。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | length |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
background-size: auto | cover | contain | <length> <percentage>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | 关键字 | 图片原始尺寸 |
cover | contain | 关键字 | 覆盖或包含于容器 |
<length> | <percentage> | 类型 | 精确尺寸值 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-size | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v4.1 | ✓ v10 |
| 所有主流浏览器均支持 | |||||
提示： cover 会保持图片比例并填满容器，可能裁切部分内容；contain 会完整显示图片，可能留白。
重要： 在 background 简写中使用 size 时，必须跟在 position 之后并用 / 分隔，如 center/cover。
❓ 常见问题
Qbackground-size: cover 和 contain 如何选择？
A需要图片完全覆盖容器、不介意裁切边缘时用 cover（长边贴合容器、短边裁切）；需要完整看到整张图片、可接受留白时用 contain。cover 常用于横幅、卡片背景；contain 常用于产品图、Logo 等需要完整展示的场景。两者都会保持图片原始宽高比，不会拉伸变形。
Qbackground-size 支持动画吗？
A支持。background-size 是可插值属性，能在过渡或 @keyframes 动画中平滑变化，例如 hover 时从 background-size: 100% 过渡到 110% 实现图片微缩放效果。不过频繁变化会触发重绘，性能敏感场景建议改用 transform: scale() 完成缩放动画。
Q如何让背景图铺满但不拉伸变形？
A使用 background-size: cover;，它会按图片原始比例缩放，最短边填满容器、长边被裁切，因此不会变形。若图片比例与容器差异较大，可配合 background-position: center 控制保留区域。想完全不裁切就用 contain（可能留白），或让容器宽高比与图片一致。
Qbackground-size 的单值和双值怎么理解？
A双值写法 background-size: 300px 200px 分别指定宽度和高度，高度写 auto 时按原始比例自动计算；单值写法 background-size: 300px 表示宽度 300px、高度按比例自动缩放。cover、contain、auto 是特殊关键字，不能与其他长度值混写。
🏷️ 相关属性
💡 相关案例
📚 相关教程
