CSS background-size 怎么用？6 个示例讲透背景图缩放与平铺

CSS background-size 怎么用？答案：它是控制背景图尺寸的属性，写 cover 让图片铺满不留白、写 contain 让图片完整显示、写百分比或像素精确控制大小。这篇文章，编程狮用 6 个可直接运行的示例，把 background-size 彻底讲透，适合刚学 CSS、总在背景图上栽跟头的读者。

本文覆盖 cover、contain、百分比、像素、auto、多背景六种用法，每个示例都附代码和解释，并整理成对比表和踩坑清单。看完你能按需求选对写法，不再靠猜、不用反复试错。

一、background-size 是什么

background-size 是 CSS 中用来设置背景图片尺寸的属性。它支持两类值：关键字（cover、contain、auto）和长度值（百分比、像素）。你可以把它理解成「给背景图选相框」——是裁掉多余部分铺满（cover），还是完整放进相框留白（contain）。

1.1 三个关键字

💡 小提示：一句话记法——cover 覆盖（宁可裁）、contain 包含（宁可留白）。

二、示例 1-2：cover 与 contain

最常见的需求：背景图铺满整个区块，不管屏幕多宽。

.hero {
    width: 100%;
    height: 300px;
    background-image: url("banner.jpg");
    background-size: cover;
    background-position: center;
}

上面这段做的是：给 .hero 区块设置一张横幅背景，cover 让图片等比放大到铺满 300px 高的区域，超出部分裁掉；background-position: center 保证裁切时居中，不会把图片关键内容裁没。

⚠️ 注意：cover 会裁图。如果图片主体在边缘（比如人像偏左），裁切后可能只剩一半，这时要用 background-position 调整裁切锚点。想亲眼对比 cover 和 contain 的差别，可以在编程狮的 在线代码实例 里分别贴两段代码运行看效果，比想象直观得多。顺便一提，这两个值也是面试里问背景图时最常被考察的点，理解透了对工作也直接有用。

2.1 contain 完整显示

要完整展示一张图（比如产品示意图），用 contain：

.preview {
    width: 200px;
    height: 200px;
    background-image: url("logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

上面这段做的是：让 logo 完整显示在 200×200 的框里，不裁切、不重复，居中摆放。框和图片比例不一致时，剩余空间就是留白。

三、示例 3-5：百分比、像素与 auto

百分比相对容器计算，像素是固定尺寸：

/* 示例 3：宽 50%、高 auto——背景图宽度占容器一半，高度按比例 */
.card {
    background-image: url("photo.jpg");
    background-size: 50% auto;
}


/* 示例 4：固定 400×200 像素 */
.card-fixed {
    background-image: url("photo.jpg");
    background-size: 400px 200px;
}

上面这段做的是：示例 3 用百分比让背景图宽度始终是容器的一半（响应式友好）；示例 4 用固定像素精确控制背景图尺寸，适合尺寸恒定的小卡片。auto 写在第二位表示高度按图片原始比例自动计算，避免拉伸变形。

💡 小提示：写两个值时，第二个省略则默认 auto。写一个值时，它代表宽度，高度自动按比例。

3.1 auto 配合单值

auto 单独用等于原始尺寸，但更常见的用法是「宽度固定 + 高度自动」：

.thumb {
    background-image: url("thumb.png");
    background-size: 120px auto;   /* 宽 120px，高按原始比例 */
    background-repeat: no-repeat;
}

上面这段做的是：缩略图固定宽度 120px，高度随图片比例自动缩放，不会变形。这是做列表缩略图的标准写法。

顺带说下移动端适配：手机屏幕宽度变化大，背景图建议用百分比或 cover 加 background-position 组合，避免固定像素值在小屏上显得过大或过小；必要时用媒体查询（@media）针对不同屏幕宽度给不同的 background-size。

四、示例 6：多背景图

一个元素可以叠多张背景图，每张图单独设置尺寸，用逗号分隔：

.hero {
    background-image: url("overlay.png"), url("banner.jpg");
    background-size: cover, cover;
    background-blend-mode: multiply;
}

上面这段做的是：banner.jpg 作为底层背景，overlay.png（一张半透明压暗层）叠在上面，multiply 混合模式让两层融合，文字更好读。多背景的顺序是第一个在最上层，尺寸值按同样的逗号顺序一一对应。

多背景的另一个常见组合是「渐变 + 图片」：用 linear-gradient 做底色、半透明的渐变压在图片上，也能达到压暗效果，而且不依赖额外图片文件。写法上把渐变写在第一位（最上层）即可。需要说明的是，背景层数越多渲染开销越大，一般两到三层足够，别为炫技叠一堆。

💡 小提示：判断某段背景效果该用哪种写法，最快的办法是打开浏览器开发者工具（F12），在样式面板里切换 background-size 的值实时看效果，比盲改代码高效得多。

五、踩坑清单

• 图片拉伸变形：两个值都写具体数值且比例不匹配时，图片会被拉伸。只写一个值（另一个 auto）能保持比例；
• cover 裁掉关键内容：主体在边缘的图会被裁掉，用 background-position 调整锚点；
• 背景图不显示：先检查 background-image 的 URL 路径对不对（相对路径以 css 文件位置为基准，不是 html）；
• 忘了 background-repeat：小图默认平铺，不想平铺要写 background-repeat: no-repeat。

总结

CSS background-size 怎么用：铺满用 cover、完整显示用 contain、精确控制用百分比或像素、多背景用逗号分隔。核心是记住「cover 宁可裁、contain 宁可留白」。

要点带走：

• cover 铺满裁边，contain 完整留白；
• 保持比例：只写一个值，另一个 auto；
• 多背景用逗号分隔，第一个在最上层。

下一步建议把背景相关属性（background-position、background-repeat、渐变背景）一起学透，背景这块就齐了。想系统学，可以对照 CSS 教程 的样式章节。

延伸学习

想把 CSS 基础补起来，可以按这个顺序来：

1. 配套课程：HTML+CSS 基础实战，跟着敲一遍比看十遍管用；
2. 想看背景和布局的综合应用，这篇 HTML5 + CSS3 制作 MP3 音乐列表播放器 是现成例子；
3. 想把背景和盒子模型一起调好，可以看 CSS3 教程，样式进阶都在里面。

常见问题

Q：background-size 和 width/height 有什么区别？
A：width/height 设置的是元素盒子的尺寸；background-size 设置的是元素背景图片的尺寸，两者互不影响。

Q：background-size: 100% 和 cover 一样吗？
A：不一样。100% 表示宽度等于容器宽度，高度按图片比例算，比例不匹配时可能显示不全；cover 会等比放大到宽和高都覆盖容器，多出的部分裁掉。

Q：background-size 兼容性怎么样？
A：现代浏览器全部支持；IE8 及更早版本不支持，需要写 background-size 之外的兼容写法（如用 filter 或改用 <img>）。目前基本可以放心用。

Q：背景图加载不出来是什么原因？
A：最常见三个：URL 路径写错（相对路径以 CSS 文件位置为基准）、图片文件被删或改名、CORS 跨域限制（用在线图片 URL 时）。按顺序排查即可。