CSS3 背景 - background shorthand 属性

核心知识点

background 简写属性的基本语法和作用
各子属性的取值顺序和规则
与单独设置各背景属性的区别
浏览器兼容性和最佳实践

学习目标

掌握 background 简写属性的完整语法
能够使用简写属性同时设置多个背景相关属性
理解各子属性的取值顺序和规则
学会在不同场景下使用简写属性
了解简写属性的优缺点和使用时机

什么是 background 简写属性？

background 是一个简写属性，用于同时设置多个背景相关的属性，包括 background-color、background-image、background-repeat、background-position、background-size、background-attachment 和 background-origin、background-clip。

语法

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip];

取值顺序

background-color：背景颜色
background-image：背景图像
background-repeat：背景重复方式
background-attachment：背景附着方式
background-position：背景位置
background-size：背景尺寸（需要跟在 background-position 后面，用 / 分隔）
background-origin：背景原点
background-clip：背景裁剪

注意事项

取值顺序：虽然属性值的顺序相对宽松，但建议按照上述顺序设置，以避免混淆
background-size：必须跟在 background-position 后面，并用 / 分隔
可选值：所有值都是可选的，可以只设置部分值
默认值：未设置的属性会使用默认值
多背景：可以设置多个背景，用逗号分隔

代码示例

示例 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 简写属性示例</title>
    <style>
        /* 单独设置各属性 */
        .box1 {
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
            background-color: #f0f0f0;
            background-image: url('https://via.placeholder.com/100');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 150px 150px;
            background-attachment: scroll;
        }
        
        /* 使用简写属性 */
        .box2 {
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
            background: #f0f0f0 url('https://via.placeholder.com/100') no-repeat scroll center center / 150px 150px;
        }
        
        /* 只设置部分属性 */
        .box3 {
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
            background: url('https://via.placeholder.com/50') repeat;
        }
        
        /* 固定背景 */
        .box4 {
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
            background: #f0f0f0 url('https://via.placeholder.com/100') no-repeat fixed center center / cover;
        }
    </style>
</head>
<body>
    <h1>background 简写属性示例</h1>
    
    <div class="box1">
        <h2>单独设置各属性</h2>
        <p>使用多个单独的背景属性</p>
    </div>
    
    <div class="box2">
        <h2>使用简写属性</h2>
        <p>使用 background 简写属性设置所有背景相关属性</p>
    </div>
    
    <div class="box3">
        <h2>只设置部分属性</h2>
        <p>只设置背景图像和重复方式</p>
    </div>
    
    <div class="box4">
        <h2>固定背景</h2>
        <p>使用简写属性设置固定背景效果</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: 
                /* 第一个背景（最上层） */
                url('https://via.placeholder.com/50/ff0000/ffffff') no-repeat left top / 50px 50px,
                /* 第二个背景 */
                url('https://via.placeholder.com/80/00ff00/ffffff') no-repeat center center / 80px 80px,
                /* 第三个背景（最下层） */
                url('https://via.placeholder.com/100/0000ff/ffffff') no-repeat right bottom / 100px 100px,
                /* 背景颜色 */
                #f0f0f0;
        }
    </style>
</head>
<body>
    <h1>多背景简写属性示例</h1>
    <div class="multi-bg"></div>
</body>
</html>

示例 3：完整用法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background 完整用法示例</title>
    <style>
        .complete-bg {
            width: 300px;
            height: 200px;
            border: 10px dashed #333;
            margin: 20px;
            padding: 20px;
            /* 完整的 background 简写属性 */
            background: 
                #f0f0f0 /* 背景颜色 */
                url('https://via.placeholder.com/100') /* 背景图像 */
                repeat-x /* 背景重复 */
                scroll /* 背景附着 */
                center top /* 背景位置 */
                / 50px 50px /* 背景尺寸 */
                padding-box /* 背景原点 */
                content-box; /* 背景裁剪 */
        }
    </style>
</head>
<body>
    <h1>background 完整用法示例</h1>
    <div class="complete-bg">
        <p>这个元素使用了完整的 background 简写属性设置，包括背景颜色、图像、重复方式、附着方式、位置、尺寸、原点和裁剪。</p>
    </div>
</body>
</html>

常见应用场景

1. 简化背景设置

/* 单独设置 */
.hero {
    background-color: #000;
    background-image: url('hero-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* 使用简写属性 */
.hero {
    background: #000 url('hero-bg.jpg') no-repeat fixed center center / cover;
}

2. 快速设置背景

/* 只设置背景颜色 */
.box {
    background: #f0f0f0;
}

/* 只设置背景图像和位置 */
.icon {
    background: url('icon.png') no-repeat center center;
}

3. 多背景设置

/* 多背景简写 */
.decorative {
    background: 
        url('pattern1.png') repeat-x top, 
        url('pattern2.png') repeat-x bottom,
        #f9f9f9;
}

浏览器兼容性

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

最佳实践

使用简写属性：在设置多个背景属性时，使用简写属性可以减少代码量，提高可读性
注意取值顺序：虽然顺序相对宽松，但建议按照标准顺序设置，以避免混淆
合理分组：将相关的背景属性组合在一个简写声明中
考虑维护性：对于复杂的背景设置，有时单独设置各属性可能更易于维护
测试兼容性：在使用较新的背景属性时，注意测试浏览器兼容性

练习

使用简写属性创建一个带有渐变背景和图标覆盖的按钮
实现一个带有固定背景和内容区域的卡片设计
使用多背景简写属性创建一个装饰性的页面头部
将一个使用多个单独背景属性的元素转换为使用简写属性

小结

background 简写属性是一个强大的工具，可以帮助你简化代码，同时设置多个背景相关属性。通过掌握其语法和取值规则，你可以更高效地编写和维护 CSS 代码。

记住，虽然简写属性可以减少代码量，但在某些情况下，单独设置各属性可能更易于理解和维护，尤其是对于复杂的背景设置。根据具体情况选择合适的方法。