CSS 背景属性完全指南：从 background-color 到多重背景、渐变与裁剪（千古前端图文教程）

CSS 背景属性是网页视觉设计的基石——从最简单的纯色打底，到背景图片的平铺、定位、滚动控制，再到 CSS3 时代的多重背景、尺寸缩放、渐变与裁剪，几乎每一个页面都离不开它们。本文以《02-CSS属性：背景属性》为骨架，系统梳理 CSS2.1 与 CSS3 的全部背景属性及其取值，并结合仓库内《博雅互动》等实战案例，帮助你掌握背景属性的每一个细节，能够独立完成从全屏大背景图、通栏 banner 到渐变按钮、裁剪动画的完整实现。

一、background 系列属性总览

在 CSS2.1 中，常见的背景属性有以下几种（经常用到，要记住）：

• background-color: #ff99ff; —— 设置元素的背景颜色。
• background-image: url(images/2.gif); —— 将图像设置为背景。
• background-repeat: no-repeat; —— 设置背景图片是否重复及如何重复，默认平铺满（重要）。
• background-position: center top; —— 设置背景图片在当前容器中的位置。
• background-attachment: scroll; —— 设置背景图片是否跟着滚动条一起移动。属性值可以是 scroll（默认属性）与 fixed（背景被固定住，不会被滚动条滚走）。
• 综合属性 background —— 将上面的多个属性写在一个声明中。

在 CSS3 中，新增了以下背景属性：

• background-origin —— 背景原点，控制背景从什么区域开始显示。
• background-clip —— 背景裁切，设置背景是否延伸到边框下面。
• background-size —— 调整背景图片尺寸。
• 多重背景 —— 一个盒子可以同时叠加多个背景图。
• 渐变 background-image: linear-gradient(...) / radial-gradient(...)。

下面逐个进行讲解。

二、background-color：背景颜色的五种表示方法

CSS2.1 中，颜色的表示方法有三种：单词、RGB 表示法、十六进制表示法。比如红色可以有下面三种写法：

background-color: red;
background-color: rgb(255,0,0);
background-color: #ff0000;

CSS3 中新增了 RGBA、HSLA 两种表示方式。RGBA、HSLA 可应用于所有使用颜色的地方，而不只局限于背景色。

1. 用英语单词表示

能够用英语单词来表述的颜色，都是简单颜色，比如 red、green、blue、orange、gray 等。代码举例：

background-color: red;

2. RGB 表示法

RGB 表示三原色“红”Red、“绿”Green、“蓝”Blue。光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色。r、g、b 三个值的取值范围都是 0~255，一共 256 个值。

比如红色：

background-color: rgb(255,0,0);

黑色：

background-color: rgb(0,0,0);

颜色可以叠加，比如黄色就是红色和绿色的叠加：

background-color: rgb(255,255,0);

RGB 色彩模式补充知识：自然界中绝大部分颜色都可以用红、绿、蓝（RGB）这三种颜色波长的不同强度组合而得，这就是常说的三原色原理。RGB 三原色也叫加色模式，因为把不同波长的光加到一起，可以得到不同的混合色，例如：红+绿=黄色，红+蓝=紫色，绿+蓝=青色。RGB 各有 256 级（0-255）亮度，总共能组合出约 1678 万种色彩，即 256×256×256=16777216。在数字视频中，对 RGB 三基色各进行 8 位编码就构成了约 1678 万种颜色，这就是常说的真彩色，所有显示设备都采用 RGB 色彩模式。

3. RGBA 表示法

background-color: rgba(0, 0, 255, 0.3);

border: 30px solid rgba(0, 255, 0, 0.3);

代码解释：

• RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。
• R、G、B 的取值范围是 0~255；透明度 Alpha 的取值范围是 0~1，0 为完全透明，1 为完全不透明。

4. 十六进制表示法

比如红色：

background-color: #ff0000;

所有用 # 开头的色值，都是 16 进制的。这里需要学会 16 进制与 10 进制之间的转换，举几个例子：

• 16 进制中的 28 等于 10 进制的多少？答：2×16+8 = 40。
• 16 进制中的 af 等于 10 进制的多少？答：10×16+15 = 175。

以此类推：

• #ff0000 等于 rgb(255,0,0)。
• background-color: #123456; 等价于 background-color: rgb(18,52,86);。

十六进制可以简化为 3 位：所有 #aabbcc 形式，都可以简化为 #abc。举例如下：

background-color:#ff0000;
/* 等价于 */
background-color:#f00;

background-color:#112233;
/* 等价于 */
background-color:#123;

但是，下面这些是无法简化的：

background-color:#222333;
background-color:#123123;

几种常见的颜色简写可以记住：

#000   黑
#fff   白
#f00   红
#222   深灰
#333   灰
#ccc   浅灰

5. HSLA 表示法

background-color: hsla(240,50%,50%,0.4);

参数解释：

• H 色调（Hue），取值范围 0~360。0 或 360 表示红色、120 表示绿色、240 表示蓝色。
• S 饱和度（Saturation），取值范围 0%~100%。值越大，越鲜艳。
• L 亮度（Lightness），取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
• A 透明度（Alpha），取值范围 0~1。

如果不知道 H 的值该设置多少，可以查看色盘来辅助理解色调取值。

关于设置透明度的其他方式

（1）opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。

（2）background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。

三、background-repeat：背景平铺控制

background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：

• no-repeat（不要平铺）
• repeat-x（横向平铺）
• repeat-y（纵向平铺）

这个属性在开发时经常用到。不同取值的效果如下：

1. 不加这个属性时（默认）：背景图片会被平铺满整个容器。注意：padding 的区域也是有背景图的，这一点与盒模型中“background-color 将填充所有 border 以内的区域”的规律一致，详见 06-CSS盒模型详解。
2. 属性值为 no-repeat（不要平铺）时：背景图只显示一次，其余区域留空。
3. 属性值为 repeat-x（横向平铺）时：背景图沿水平方向重复铺满。
4. 属性值为 repeat-y（纵向平铺）时：背景图沿垂直方向重复铺满。

这种属性的应用场景很广。举个例子：设计师设计一张宽度只有 1px、颜色纵向渐变的图片，然后通过 repeat-x 将其水平平铺，整个页面就都是渐变了。在搜索引擎上搜“平铺背景”，可以发现周期性的图片都可以采用这种方法进行平铺。

四、background-position：背景定位

background-position 属性指的是背景定位属性。描述属性值有两种方式：用像素描述、用单词描述。

1、用像素值描述属性值

格式如下：

background-position: 向右偏移量 向下偏移量;

属性值可以是正数，也可以是负数，例如 100px 200px、-50px -120px。第一个值是水平方向（X 轴）偏移，第二个值是垂直方向（Y 轴）偏移。

2、用单词描述属性值

格式如下：

background-position: 描述左右的词 描述上下的词;

• 描述左右的词：left、center、right
• 描述上下的词：top、center、bottom

例如：right center 表示将图片放到右边的中间；center center 表示将图片放到正中间；单独一个 bottom 表示图片的底边和父亲底边贴齐（好好理解这一点）。

实战场景 1：大背景图

以“暗黑3 台湾”官网为例，其背景是一张较大的背景图。实际做法是把这张图片作为网站的背景图，只需要给 body 标签加如下属性即可：

body {
    background-image: url(images/bg-repeat.jpg); /* 替换为你的背景图路径 */
    background-repeat: no-repeat;
    background-position: center top;
}

上方代码中，如果没加 background-position 这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。

实战场景 2：通栏 banner

很多网站的首页都会有 banner 图（网站最上方的全屏大图叫做「通栏 banner」），这种图要求横向宽度特别大。比如说，设计师给出一张 1920×465 的超大 banner 图，如果把这个 banner 图作为 img 标签直接插入网页中，会有问题：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。

正确的做法是，将 banner 图作为 div 的背景图，背景图超出 div 的部分会自动溢出隐藏。需要给 div 设置的属性如下：

div {
    height: 465px; /* 高度取 banner 图的高度 */
    background-image: url(images/banner.jpg); /* 替换为你的 banner 图路径 */
    background-position: center top;
    background-repeat: no-repeat;
}

上方代码中，给 div 设置 height（高度为 banner 图的高度），不需要设置宽度（因为块级元素宽度会自动霸占整行）。这样 banner 图会永远处于网页的正中间（水平方向来看）。

这个通栏 banner 方案在仓库的实战案例《博雅互动》中得到了完整的应用：09-CSS案例讲解：博雅互动 中 .banner 的样式就是：

.banner {
    height: 465px;
    background: url(images/banner.jpg) no-repeat center top;
}

即将 background-image、background-repeat、background-position 三个属性合并写入了 background 综合属性中，可见综合写法在实际项目中非常常见。

五、background-attachment：背景是否随滚动

background-attachment 设置背景图片是否固定。属性值可以是：

• fixed：背景被固定住，不会被滚动条滚走（即视差效果的基础）。
• scroll：与 fixed 属性相反，是默认属性，背景随页面滚动。

当设置为 background-attachment: fixed; 时，滚动页面，背景图片保持不动，产生一种“背景钉在屏幕上”的视觉效果。

六、background 综合属性

background 属性和 border 一样，是一个综合属性，可以将多个属性写在一起（border 详见 06-CSS盒模型详解）。

举例 1：

background: red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

background-color: red;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
background-attachment: fixed;

以后，我们可以用小属性层叠掉大属性。综合属性中的各个小属性可以任意省略其中的一部分，例如：

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

这一行就同时设置了颜色、图片、平铺方式和位置，效果与分别写四个小属性完全一致。

七、background-size：背景尺寸

background-size 属性：设置背景图片的尺寸。格式举例：

/* 宽、高的具体数值 */
background-size: 500px 500px;

/* 宽高的百分比（相对于容器的大小） */
background-size: 50% 50%;   /* 如果两个属性值相同，可以简写成：background-size: 50%; */

background-size: 100% auto;  /* 宽度占满容器，高度按比例自适应 */

/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
background-size: cover;

/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */
background-size: contain;

这里对 cover 和 contain 进行再次强调：

• cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。
• contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域留白。

代码举例（假设图片本身的尺寸是 1080×1350）：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.img_wrap {
			display: flex;
		}

		.img {
			width: 200px;
			height: 200px;
			border: 1px solid red;
			background: url(images/demo.jpg) no-repeat; /* 替换为你的图片路径 */
			margin-right: 20px;
		}

		.div1 {
			background-size: cover;
		}
		.div2 {
			background-size: contain;
		}
	</style>
</head>

<body>
	<section class="img_wrap">
		<div class="img div1"></div>
		<div class="img div2"></div>
	</section>
</body>

</html>

在上方代码的基础之上，再加一个 background-position: center 属性之后，图片就会在容器里居中显示。对于 cover 模式，超出部分被隐藏，居中后保留的是图片的中间区域；对于 contain 模式，图片完整居中，两侧或上下留白。

八、背景原点：background-origin 属性

background-origin 属性：控制背景从什么地方开始显示。格式举例：

/* 从 padding-box 内边距开始显示背景图 */
background-origin: padding-box;           /* 默认值 */

/* 从 border-box 边框开始显示背景图 */
background-origin: border-box;

/* 从 content-box 内容区域开始显示背景图 */
background-origin: content-box;

如果属性值设置成了 border-box，那边框部分也会显示图片。

九、background-clip：背景是否延伸到边框下面

background-clip 属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面。超出裁剪区域的背景部分将被裁剪掉。格式举例：

background-clip: content-box;    /* 超出 content-box 的部分，将裁剪掉 */

属性值可以是：

• border-box：超出 border-box 的部分，将裁剪掉。
• padding-box：超出 padding-box 的部分，将裁剪掉。
• content-box：超出 content-box 的部分，将裁剪掉。

background-origin 与 background-clip 经常配合使用。假设现在有这样的属性设置：

background-origin: border-box;
background-clip: content-box;

上方代码的意思是：背景图片从边框部分开始加载，但是超出内容区域的部分将被裁剪掉。

十、同时设置多个背景

可以给一个盒子同时设置多个背景，用逗号隔开即可，常用于自适应布局。代码举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多重背景</title>
    <style>
        .box {
            height: 416px;
            border: 1px solid #000;
            margin: 100px auto;
            /* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
            background: url(images/bg1.png) no-repeat left top,
            url(images/bg2.png) no-repeat right top,
            url(images/bg3.png) no-repeat right bottom,
            url(images/bg4.png) no-repeat left bottom,
            url(images/bg5.png) no-repeat center;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

上方代码中，给盒子设置了五张小图，拼成一张大图。当改变浏览器窗口大小时，可以自适应布局——每个背景层分别定位在容器的四个角与中心，无论容器尺寸如何变化，构图关系都保持不变。

十一、渐变：background-image

渐变是 CSS3 中比较丰富多彩的一个特性，通过渐变可以实现许多炫丽的效果，有效减少图片的使用数量，并且具有很强的适应性和可扩展性。渐变分为：

• 线性渐变：沿着某条直线朝一个方向产生渐变效果。
• 径向渐变：从一个中心点开始沿着四周产生渐变效果。
• 重复渐变：渐变效果循环重复。

1. 线性渐变

格式：

background-image: linear-gradient(方向, 起始颜色, 终止颜色);

background-image: linear-gradient(to right, yellow, green);

参数解释：

• 方向可以是：to left、to right、to top、to bottom，也可以是角度 30deg（指的是顺时针方向 30°）。

格式举例（包含多种方向与多色阶写法）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        div {
            width: 500px;
            height: 100px;
            margin: 10px auto;
            border: 1px solid #000;
        }

        /* 语法：
            linear-gradient(方向，起始颜色，终止颜色);
            方向：to left  to right  to top  to bottom  角度  30deg
            起始颜色、终止颜色
        */
        div:nth-child(1) {
            background-image: linear-gradient(to right, yellow, green);
        }

        /* 不写方向，表示默认的方向是：从上往下 */
        div:nth-child(2) {
            background-image: linear-gradient(yellow, green);
        }

        /* 方向可以指定角度 */
        div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(135deg, yellow, green);
        }

        /* 0% 的位置开始出现黄色，40% 的位置开始出现红色的过渡。
           70% 的位置开始出现绿色的过渡，100% 的位置开始出现蓝色 */
        div:nth-child(4) {
            background-image: linear-gradient(to right,
            yellow 0%,
            red 40%,
            green 70%,
            blue 100%);
        }

        /* 颜色之间，出现突变（色带效果） */
        div:nth-child(5) {
            background-image: linear-gradient(45deg,
            yellow 0%,
            yellow 25%,
            blue 25%,
            blue 50%,
            red 50%,
            red 75%,
            green 75%,
            green 100%);
        }

        /* 黑白相间的条纹效果 */
        div:nth-child(6) {
            background-image: linear-gradient(to right,
            #000 0%,
            #000 25%,
            #fff 25%,
            #fff 50%,
            #000 50%,
            #000 75%,
            #fff 75%,
            #fff 100%);
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

注意：同一颜色在两个相邻色标上重复书写（如 yellow 0% 与 yellow 25%），可以制造出无过渡的突变色带，这是制作条纹、方格等纹理图案的常用技巧。

实战举例：渐变按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 渐变按钮</title>
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #f8fcd4;
        }

        .nav {
            width: 800px;
            text-align: center;
            padding-top: 50px;
            margin: 0 auto;
        }

        /* 设置按钮基本样式 */
        .nav a {
            display: inline-block;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            border: 1px solid #e59500;
            background-color: #FFB700;
            background-image: linear-gradient(
                    to bottom,
                    #FFB700 0%,
                    #FF8C00 100%
            );
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="javascript:;">导航1</a>
    <a href="javascript:;">导航2</a>
    <a href="javascript:;">导航3</a>
    <a href="javascript:;">导航4</a>
    <a href="javascript:;">导航5</a>
    <a href="javascript:;">导航6</a>
</div>
</body>
</html>

渐变按钮相比纯色按钮更有立体感：上层 #FFB700 过渡到下层 #FF8C00，配合 1px 的边框，形成轻微凸起的质感。

兼容性提示：私有前缀

渐变属于 CSS3 特性，在旧版浏览器下需要添加私有前缀才能生效，这一知识点在 11-CSS3属性详解（一） 中有完整讲解。私有前缀对应关系如下：

• -webkit-：谷歌、苹果（Chrome、Safari）
• -moz-：火狐（Firefox）
• -ms-：IE
• -o-：欧朋（Opera）

写法举例：

background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);

将带各前缀的声明写在一起，浏览器会识别并采用自己支持的那一条；最后一行标准的无前缀写法供现代浏览器使用。如果加了前缀仍无法解决兼容问题，应尽量避免使用该特性，无需刻意去处理 CSS3 的兼容性问题。

2. 径向渐变

格式：

background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);

background-image: radial-gradient(100px at center, yellow, green);

解释：围绕中心点做渐变，半径是 100px（注：原文示例中为 150px 的描述，此处以代码实际值为准），从黄色到绿色做渐变。中心点的位置可以是 at left、at right、at center、at bottom、at top。如果以像素为单位，则中心点参照的是盒子的左上角。

格式举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        div {
            width: 250px;
            height: 250px;
            border: 1px solid #000;
            margin: 20px;
            float: left;
        }

        /*
            径向渐变：
            radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
            中心点位置：at  left  right  center bottom  top
        */

        /* 辐射半径为 100px，中心点在中间 */
        div:nth-child(1) {
            background-image: radial-gradient(100px at center, yellow, green);
        }

        /* 中心点在左上角 */
        div:nth-child(3) {
            background-image: radial-gradient(at left top, yellow, green);
        }

        /* 中心点在距左上角 50px 50px 处 */
        div:nth-child(2) {
            background-image: radial-gradient(at 50px 50px, yellow, green);
        }

        /* 设置不同的颜色渐变 */
        div:nth-child(4) {
            background-image: radial-gradient(100px at center,
            yellow 0%,
            green 30%,
            blue 60%,
            red 100%);
        }

        /* 如果辐射半径的宽高不同，那就是椭圆 */
        div:nth-child(5) {
            background-image: radial-gradient(100px 50px at center, yellow, green);
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

实战举例：径向渐变 + 边框圆角生成按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 渐变</title>
    <style>
        div:nth-child(1) {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;
            background-color: yellowgreen;
        }

        div:nth-child(2) {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;
            background-color: yellowgreen;
            background-image: radial-gradient(
                    200px at 100px 100px,
                    rgba(0, 0, 0, 0),
                    rgba(0, 0, 0, 0.5)
            );
        }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

上图中，给第二个 div 设置的透明度是从 0 到 0.5，配合 border-radius: 100px 的圆形裁切，形成边缘略暗的立体球面效果。如果设置的透明度是从 0 到 0，则样式无变化，和第一个 div 一样；如果设置的透明度是从 1 到 1，则盒子是全黑的。

3. 重复渐变

在上述线性渐变、径向渐变的基础上，CSS3 还提供了重复渐变（repeating-linear-gradient、repeating-radial-gradient），让渐变图案按周期循环铺满容器，是制作条纹背景、圆环纹理的常用手段，与本章节“平铺背景”的思想一脉相承。

十二、clip-path：裁剪出元素的部分区域做展示

clip-path 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。虽然 clip-path 不是背景属性，但这个属性非常强大，往往会结合背景属性一起使用，达到一些效果。

举例：鼠标悬停时，放大裁剪的区域

.div1 {
    width: 320px;
    height: 320px;
    border: 1px solid red;
    background: url(images/demo.png) no-repeat; /* 替换为你的图片路径 */
    background-size: cover;

    /* 裁剪出圆形区域 */
    clip-path: circle(50px at 100px 100px);
    transition: clip-path .4s;
}
.div1:hover {
    /* 鼠标悬停时，裁剪出更大的圆形 */
    clip-path: circle(80px at 100px 100px);
}

clip-path 属性的好处是：即使做了任何裁剪，容器的占位大小是不变的。比如上方代码中，容器的占位大小一直都是 320px × 320px，这样方便制作动画效果，配合 transition 即可实现悬停放大裁剪区域的平滑过渡。

clip-path 还支持 polygon() 多边形裁剪，可以用一组顶点坐标裁剪出任意的多边形区域；另外，通过 clip-path: url(#svg-path) 可以引用 SVG 矢量路径，实现 iOS 图标的圆角等复杂形状。clip-path 与 transition 的结合也是 12-CSS3属性详解：动画详解 中过渡动画知识的典型应用场景。

十三、总结与延伸阅读

至此，CSS 背景属性已经完整覆盖：颜色五法（单词、RGB、RGBA、十六进制、HSLA）、平铺（repeat）、定位（position）、滚动（attachment）、综合写法（background）、尺寸（size）、原点（origin）、裁切（clip）、多重背景与两大渐变（linear-gradient、radial-gradient），以及常与背景配合使用的 clip-path 裁剪。

背景属性在仓库教程中的应用贯穿多个章节：

• 06-CSS盒模型详解：理解 padding 区域也有背景、背景色填充 border 以内区域，是掌握 background-origin 与 background-clip 的前提。
• 09-CSS案例讲解：博雅互动：通栏 banner 与背景图定位的完整实战。
• 11-CSS3属性详解（一）：渐变等 CSS3 属性的私有前缀兼容方案。
• 12-CSS3属性详解：动画详解：clip-path 等属性与过渡动画的结合。

将这些背景属性灵活组合——例如 background-size: cover 保证大图铺满、background-position: center 保证居中、background-attachment: fixed 制造视差、多重背景实现复杂构图、渐变替代图片减少请求——就能做出既美观又高性能的页面视觉效果。