CSS3 背景 - background-size 属性

核心知识点

background-size 属性的基本语法和作用
不同类型的取值方式（关键字、长度值、百分比值、cover、contain）
多背景图像的尺寸设置
与其他背景属性的配合使用
浏览器兼容性和最佳实践

学习目标

掌握 background-size 属性的完整语法
能够使用不同的取值方式控制背景图像的尺寸
理解 cover 和 contain 关键字的区别和应用场景
学会在多背景图像中设置各自的尺寸
了解常见的背景尺寸调整场景和解决方案

什么是 background-size 属性？

background-size 属性用于设置元素背景图像的尺寸。默认情况下，背景图像会以其原始尺寸显示。

语法

background-size: [宽度] [高度];

取值方式

1. 关键字

关键字	描述
`auto`	默认值，保持背景图像的原始尺寸
`cover`	缩放背景图像以完全覆盖元素，可能会裁剪图像
`contain`	缩放背景图像以适应元素，保持图像的完整显示

2. 长度值

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

3. 百分比值

background-size: 50% 75%; /* 宽度为元素的50%，高度为元素的75% */

4. 单值语法

background-size: 100px; /* 宽度100px，高度auto（保持原始比例） */
background-size: 50%; /* 宽度为元素的50%，高度auto（保持原始比例） */

cover vs contain

cover

背景图像会被缩放以完全覆盖整个元素
图像的宽高比保持不变
如果图像的宽高比与元素不同，图像会被裁剪
确保元素完全被背景覆盖，没有空白区域

contain

背景图像会被缩放以适应元素
图像的宽高比保持不变
图像会完全显示，不会被裁剪
如果图像的宽高比与元素不同，元素会有空白区域

多背景图像的尺寸设置

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

background-image: url('image1.png'), url('image2.png');
background-size: 50px 50px, cover;

代码示例

示例 1：基本用法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-size 示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
            background-image: url('https://via.placeholder.com/200');
            background-repeat: no-repeat;
            background-position: center center;
        }
        
        .size1 {
            background-size: auto; /* 默认值 */
        }
        
        .size2 {
            background-size: 100px 150px; /* 固定尺寸 */
        }
        
        .size3 {
            background-size: 50% 75%; /* 百分比 */
        }
        
        .size4 {
            background-size: cover; /* 覆盖 */
        }
        
        .size5 {
            background-size: contain; /* 包含 */
        }
    </style>
</head>
<body>
    <h1>background-size 属性示例</h1>
    
    <div class="box size1">
        <p>auto (默认)</p>
    </div>
    
    <div class="box size2">
        <p>100px 150px</p>
    </div>
    
    <div class="box size3">
        <p>50% 75%</p>
    </div>
    
    <div class="box size4">
        <p>cover</p>
    </div>
    
    <div class="box size5">
        <p>contain</p>
    </div>
</body>
</html>

示例 2：多背景图像

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多背景图像尺寸示例</title>
    <style>
        .multi-bg {
            width: 400px;
            height: 300px;
            border: 2px solid #333;
            margin: 20px;
            background-image: 
                url('https://via.placeholder.com/100/ff0000/ffffff'),
                url('https://via.placeholder.com/200/00ff00/ffffff'),
                url('https://via.placeholder.com/300/0000ff/ffffff');
            background-repeat: no-repeat;
            background-position: 
                left top,          /* 红色方块 */
                center center,      /* 绿色方块 */
                right bottom;       /* 蓝色方块 */
            background-size: 
                50px 50px,          /* 红色方块：固定尺寸 */
                150px auto,         /* 绿色方块：宽度固定，高度自适应 */
                cover;              /* 蓝色方块：覆盖整个区域 */
        }
    </style>
</head>
<body>
    <h1>多背景图像尺寸设置</h1>
    <div class="multi-bg"></div>
</body>
</html>

常见应用场景

1. 响应式背景图像

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

2. 图标调整

.icon {
    width: 32px;
    height: 32px;
    background-image: url('icon.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px; /* 缩小图标 */
}

3. 背景图案填充

.pattern {
    background-image: url('pattern.png');
    background-repeat: repeat;
    background-size: 50px 50px; /* 调整图案大小 */
}

浏览器兼容性

浏览器	支持情况
Chrome	✅
Firefox	✅
Safari	✅
Edge	✅
IE 9+	✅

最佳实践

使用 cover 实现全屏背景：对于需要完全覆盖元素的背景图像，使用 cover 关键字
使用 contain 保持图像完整：当需要完整显示背景图像时，使用 contain 关键字
使用百分比实现响应式调整：百分比值会随着元素尺寸变化而自动调整
注意性能影响：过大的背景图像或频繁的尺寸调整可能会影响性能
与 background-position 配合使用：调整背景大小后，位置也可能需要相应调整

练习

创建一个带有全屏背景图像的英雄区域，使用 cover 确保背景完全覆盖
实现一个带有固定尺寸图标的导航菜单
尝试使用不同的单位组合创建一个复杂的背景布局
设计一个响应式的卡片，背景图像始终保持完整显示

小结

background-size 属性是控制背景图像尺寸的强大工具，通过灵活使用不同的取值方式，你可以实现各种复杂的背景效果。结合其他背景属性如 background-position 和 background-repeat，你可以创建出更加丰富的视觉效果。

记住，在实际应用中，背景图像的尺寸会受到元素尺寸、背景图像原始尺寸以及其他背景属性的影响，需要根据具体情况进行调整。