在响应式网页开发过程中，背景图片的适配是很多开发者会遇到的实际问题，不同尺寸的设备屏幕上，背景图片很容易出现拉伸变形、内容被裁剪或者显示不完整的情况。CSS的background-size属性就是专门用来控制背景图片尺寸的核心属性，其中cover取值是适配全屏背景场景的常用方案，能够很好地保证背景图片覆盖整个容器区域。
background-size属性基础说明
background-size是CSS背景模块中的属性，用来设置背景图片的尺寸大小，它有以下几种常见的取值方式：
- 长度值：直接设置背景图片的宽度和高度，比如
100px 200px，如果只设置一个值，第二个值默认是auto - 百分比：相对于背景定位区域的百分比来设置尺寸，比如
50% 50% - cover：缩放背景图片以完全覆盖背景定位区域，可能裁剪图片部分内容
- contain：缩放背景图片以完全装入背景定位区域，可能留白
- auto：默认值，背景图片保持原始尺寸
cover取值的适配逻辑
cover取值的核心逻辑是让背景图片等比缩放，直到图片的宽度和高度都大于等于容器的对应尺寸，这样就能保证容器的所有区域都被背景图片覆盖，不会出现空白。如果图片的宽高比和容器的宽高比不一致，图片超出容器的部分会被裁剪掉，不会变形。
比如一个容器的宽度是1920px，高度是1080px，宽高比是16:9，背景图片的原始尺寸是1600px*900px，宽高比也是16:9，那么使用cover的时候，图片会等比缩放到1920px*1080px，刚好铺满容器。如果背景图片的原始尺寸是1200px*1000px，宽高比是6:5，那么缩放的时候会先满足高度达到1080px，此时宽度会变成1296px，小于容器的1920px，所以会继续缩放直到宽度达到1920px，此时高度会变成1600px，超出容器的1080px高度，上下部分会被裁剪。
cover在响应式场景的实际应用
在响应式网页中，我们通常会给容器设置相对尺寸，比如全屏的背景容器可以用视口单位设置尺寸，然后配合background-size: cover来实现不同屏幕下的背景适配。
下面是一个全屏背景的基础实现示例：
/* 全屏背景容器样式 */
.full-screen-bg {
/* 宽度占满整个视口 */
width: 100vw;
/* 高度占满整个视口 */
height: 100vh;
/* 设置背景图片 */
background-image: url('https://ipipp.com/bg.jpg');
/* 背景图片不重复 */
background-repeat: no-repeat;
/* 背景图片居中显示 */
background-position: center center;
/* 背景图片尺寸设置为cover */
background-size: cover;
}
上面的代码中，容器会占满整个浏览器视口，背景图片会等比缩放覆盖整个容器，不管屏幕是手机竖屏、平板横屏还是电脑宽屏，都能保证背景铺满整个区域，不会出现空白，也不会出现图片拉伸变形的情况。
cover与contain的差异对比
很多开发者会混淆cover和contain的用法，两者的核心差异如下：
| 属性取值 | 适配逻辑 | 是否可能留白 | 是否可能裁剪 | 适用场景 |
|---|---|---|---|---|
| cover | 等比缩放直到覆盖整个容器 | 否 | 是 | 全屏背景、需要铺满容器的背景场景 |
| contain | 等比缩放直到图片完全放入容器 | 是 | 否 | 需要完整显示图片内容的场景，比如产品展示背景 |
使用cover的注意事项
在使用background-size: cover的时候，有几个需要注意的点：
- 背景图片的重要视觉内容尽量放在图片中心区域，因为cover可能会裁剪边缘内容，中心区域被裁剪的概率更低
- 如果容器尺寸变化幅度很大，比如从手机竖屏的375px宽度到电脑的1920px宽度，建议准备不同分辨率的背景图片，配合媒体查询使用，避免小屏幕加载过大的图片影响性能
- background-size需要配合background-position使用，默认是left top，通常设置为center center可以让裁剪更均匀
下面是一个配合媒体查询适配不同屏幕的示例：
/* 基础全屏背景样式 */
.full-screen-bg {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* 小屏幕设备，加载小尺寸背景图 */
@media screen and (max-width: 768px) {
.full-screen-bg {
background-image: url('https://ipipp.com/bg-small.jpg');
}
}
/* 大屏幕设备，加载大尺寸背景图 */
@media screen and (min-width: 769px) {
.full-screen-bg {
background-image: url('https://ipipp.com/bg-large.jpg');
}
}
通过上面的方式，既能保证不同屏幕下背景图片的适配效果，也能优化页面的加载性能，提升用户体验。
CSSbackground-sizecover响应式网页背景图片修改时间：2026-06-20 07:03:30