学习

background-size 背景尺寸

2026-02-23/0/ 编辑

background-size 背景尺寸

概念

background-size 属性用于设置背景图片的尺寸，控制背景图片在元素中的大小。

语法

background-size: 值;

属性值

1. 具体数值（像素）

background-size: 100px 200px;  /* 宽100px 高200px */
background-size: 50px 50px;   /* 宽50px 高50px */

说明： 第一个值是宽度，第二个值是高度。

2. 百分比

background-size: 50% 20%;  /* 宽50% 高20%，相对于容器 */
background-size: 100% 100%; /* 与容器等大 */

说明： 百分比是相对于元素内容区的大小。

3. auto

background-size: auto;           /* 默认，原始尺寸 */
background-size: 50% auto;       /* 宽50%，高自动 */
background-size: auto 100%;       /* 宽自动，高100% */

说明： auto 表示图片保持原始比例。

4. contain

background-size: contain;

说明： 背景图片等比缩放到正好全部容纳到盒子中，可能会留白。

5. cover

background-size: cover;

说明： 背景图片等比缩放到完全覆盖盒子，可能会被裁剪。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-size 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .box {
            width: 200px;
            height: 200px;
            border: 2px solid red;
            background-image: url(images/bg48.png);
            background-repeat: no-repeat;
            float: left;
            margin: 20px;
            padding: 10px;
            text-align: center;
            font-size: 14px;
        }

        .box1 {
            /* 具体数值：宽100px 高200px */
            background-size: 100px 200px;
        }

        .box2 {
            /* 百分比：宽50% 高20% */
            background-size: 50% 20%;
        }

        .box3 {
            /* 百分比+auto：宽50%，高自动保持比例 */
            background-size: 50% auto;
        }

        /* 第二组：contain 和 cover */
        .box-group2 {
            width: 200px;
            height: 200px;
            border: 2px solid red;
            background-image: url(images/yw.png);
            background-repeat: no-repeat;
            float: left;
            margin: 20px;
            padding: 10px;
            text-align: center;
            font-size: 14px;
        }

        .box4 {
            /* contain: 等比缩放到全部容纳 */
            background-size: contain;
            background-color: #f0f0f0;
        }

        .box5 {
            /* cover: 等比缩放到完全覆盖 */
            background-size: cover;
        }

        .container::after {
            content: "";
            display: block;
            clear: both;
        }

        h3 {
            color: #333;
            margin-bottom: 20px;
        }

        .label {
            font-size: 12px;
            color: #666;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>background-size 背景尺寸演示</h1>

    <h3>使用数值和百分比</h3>
    <div class="container">
        <div class="box box1">
            <strong>100px 200px</strong>
            <div class="label">具体数值</div>
        </div>

        <div class="box box2">
            <strong>50% 20%</strong>
            <div class="label">百分比</div>
        </div>

        <div class="box box3">
            <strong>50% auto</strong>
            <div class="label">宽50% 高自动</div>
        </div>
    </div>

    <h3>contain 和 cover 对比</h3>
    <div class="container">
        <div class="box-group2 box4">
            <strong>contain</strong>
            <div class="label">全部容纳，可能留白</div>
        </div>

        <div class="box-group2 box5">
            <strong>cover</strong>
            <div class="label">完全覆盖，可能裁剪</div>
        </div>
    </div>
</body>
</html>

详细说明

1. 具体数值

使用像素或其他长度单位设置背景图片的精确尺寸。

background-size: 100px 200px;  /* 宽100px，高200px */
background-size: 10em 15em;     /* 宽10em，高15em */
background-size: 50vw 50vh;     /* 宽50vw，高50vh */

特点：

精确控制尺寸
可能导致图片变形（宽高比不一致时）

2. 百分比

相对于元素内容区的大小设置背景图片尺寸。

background-size: 50% 50%;   /* 宽50%，高50% */
background-size: 100% 100%; /* 与容器等大 */
background-size: 50% auto;  /* 宽50%，高自动保持比例 */

特点：

相对于容器大小
响应式友好
单个值时，第二个值默认为 auto

3. auto

保持图片原始尺寸或比例。

background-size: auto;       /* 原始尺寸 */
background-size: 200px auto; /* 宽200px，高自动保持比例 */
background-size: auto 200px; /* 宽自动，高200px */

特点：

保持图片宽高比
不会变形

4. contain

等比缩放背景图片，使其完全容纳在容器内。

background-size: contain;

特点：

图片完整显示，不会被裁剪
可能留白（容器和图片比例不一致时）
图片可能小于容器

使用场景：

Logo 显示
需要完整显示图片的情况

5. cover

等比缩放背景图片，使其完全覆盖容器。

background-size: cover;

特点：

完全覆盖容器，不留白
可能被裁剪（容器和图片比例不一致时）
图片可能大于容器

使用场景：

Hero 图片
背景图
装饰性背景

多张背景图

可以为每张背景图设置不同的尺寸：

.background {
    background-image: url(bg1.png), url(bg2.png);

    background-size:
        100px 100px,  /* 第一张图片 */
        50% 50%;      /* 第二张图片 */
}

实际应用场景

场景 1：Hero 背景图

.hero {
    width: 100%;
    height: 500px;
    background-image: url(hero-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

场景 2：响应式 Logo

.logo {
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 150px;
    height: 50px;
}

@media (max-width: 768px) {
    .logo {
        background-size: 100px auto;
        width: 100px;
    }
}

场景 3：图标背景

.icon {
    background-image: url(icon.png);
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: center;
    width: 40px;
    height: 40px;
}

场景 4：全屏背景

body {
    background-image: url(fullscreen-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

场景 5：平铺纹理

.texture {
    background-image: url(pattern.png);
    background-repeat: repeat;
    background-size: 50px 50px;
}

与其他属性配合

与简写属性配合

/* 完整简写 */
background: url(bg.png) no-repeat center center / cover;

/* 分开写 */
background-image: url(bg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;

与多张背景图配合

.background {
    background:
        url(icon1.png) no-repeat 10px 10px / 32px 32px,
        url(icon2.png) no-repeat 50px 10px / 32px 32px,
        url(bg.jpg) no-repeat center / cover;
}

注意事项

浏览器兼容性：background-size 在 IE9+ 支持，需要考虑旧浏览器
性能考虑：过大的背景图片会影响加载速度
图片质量：使用 cover 时，确保图片有足够高的分辨率
响应式：百分比值在响应式设计中非常有用
默认值：background-size 的默认值是 auto

浏览器兼容性

属性值	Chrome	Firefox	Safari	IE/Edge
`auto`, `contain`, `cover`	✅ 3.0+	✅ 4.0+	✅ 5.0+	✅ 9.0+
数值和百分比	✅ 3.0+	✅ 4.0+	✅ 5.0+	✅ 9.0+

常见问题

Q1: contain 和 cover 的区别是什么？

contain：图片完整显示，可能留白
cover：完全覆盖，可能裁剪

Q2: 如何让背景图片自适应容器大小？

/* 方法 1：cover（推荐）*/
.background {
    background-size: cover;
}

/* 方法 2：100% 100%（会变形）*/
.background {
    background-size: 100% 100%;
}

/* 方法 3：contain + 居中（完整显示）*/
.background {
    background-size: contain;
    background-position: center;
}

Q3: 多张背景图如何设置不同尺寸？

.multi-bg {
    background-image: url(bg1.png), url(bg2.png);
    background-size: 100px 100px, 50% 50%;
}

最佳实践

/* ✅ 推荐：Hero 图片使用 cover */
.hero {
    background: url(hero.jpg) no-repeat center center / cover;
}

/* ✅ 推荐：Logo 使用 contain */
.logo {
    background: url(logo.png) no-repeat center / contain;
}

/* ✅ 推荐：图标使用具体尺寸 */
.icon {
    background: url(icon.png) no-repeat center / 32px 32px;
}

/* ✅ 推荐：响应式使用百分比 */
.responsive-bg {
    background: url(bg.jpg) no-repeat center / 100% auto;
}

/* ✅ 推荐：提供回退方案 */
.hero {
    background: url(hero.jpg) no-repeat center center / cover, #333;
}

学习笔记：background-size 控制背景图片的尺寸，cover 和 contain 是最常用的值，需要根据场景选择合适的方式。

css学习