一、概述

在当今的HTML页面中，页面的背景色默认为 “白色”，除了少许的表单元素及HTML5规范后才出现的一些新的 “功能性” 元素标签，其它元素是不具有背景色的（也可以理解为透明的）。要为页面内的元素添加漂亮的“装饰”，让页面表现得更加丰富，区别于人，除了“border”、“outline”、“box-shadow”外，“background”在里面也扮演着相当重要的角色，本章的主要内容就是围绕“background”这个属性进行的。

二、元素背景 *

1、背景颜色

background-color 属性主要用于设置元素的背景颜色，可以使用的颜色为Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”

section.t1 { background-color: red; }

section.t2 { background-color: #008800; }

section.t3 { background-color: rgba(0, 0, 0, 1); }

提示：

1、十六进制颜色参照表：www.sioe.cn/yingyong/ya…

2、Webstorm 颜色拾取器：在编辑颜色的位置输入 choose color...

3、QQ截图可以拾取颜色

2、背景图片

background-image 用于设置背景图片，在实际运用的过程中需要注意的是背景图片“background-image”是可以和背景色“background-color”共存的，也就是当采用一张“非矩形”的“png图片”作为背景图片时要小心背景色带来的意外影响。

div { background-image: url("./images/1.jpg") }

3、背景重复

background-repeat 用于设置背景图片的重复方式。当一张背景图片宽或高小于其元素容器，或用 background-size（后面会讲到）设置宽高小于元素容器的宽高时，背景图片默认会以“平铺”的方式排满整个元素的背景，而该属性正式用于控制图像重复排列方式的，它有以下值：

repeat：默认，以“平铺”的方式排列图片
repeat-x：只在水平方向（X轴方向）进行重复
repeat-y：只在垂直方向（Y轴方向）进行重复
no-repeat：使背景图片不重复

<div class="bg-repeat-wrap">
    <section class="item repeat"></section>
    <section class="item repeat-x"></section>
    <section class="item repeat-y"></section>
    <section class="item no-repeat"></section>
</div>

.bg-repeat-wrap { text-align: center;}
.bg-repeat-wrap .item {
    width:  300px;
    height: 200px;
    border: 1px solid #808080;

    display: inline-block;

    /*设置背景图片*/
    background-image: url("../images/timor.jpeg");
}
.repeat    { background-repeat: repeat;}
.repeat-x  { background-repeat: repeat-x;}
.repeat-y  { background-repeat: repeat-y;}
.no-repeat { background-repeat: no-repeat;}

4、背景尺寸

background-size 属性用于设置背景图片的大小，主要可以通过四种类型的单位设置：

像素值

可以通过像素“px”精确地设置背景图片的大小。需要设置为两个值，第一个值表示背景图的宽度，第二个值表示背景图的高度，还可以通过设置宽度或高度的其中一个，将另外一个值设置成 auto 达到保持背景图原始图像比例的效果。如：“240px 120px”、“180px auto”或“auto（相当于还原默认的大小）”。
百分比值

用“百分比”作为值，结构和用“像素值”一致，也是两个值，第一个值是相对于元素宽度的百分比值，第二个值是相对于元素高度的百分比。如：“100% 80%”、“100% auto”或“auto 50%”。
contain

自动将背景图像填满元素的其中一边，图像的比例保持不变。
cover

在保持图像原始比例的情况下，将元素的背景区域完全覆盖，超出元素宽高的部分会自动被裁剪，是一种比较“智能”的背景图片大小设置方式，通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。

<div class="bg-size-wrap">
    <section class="item px"></section>
    <section class="item percent"></section>
    <section class="item contain"></section>
    <section class="item cover"></section>
</div>

.bg-size-wrap {
    text-align: center;
}
.bg-size-wrap .item {
    width:  238px;
    height: 168px;

    display: inline-block;
    margin: 0px 30px;
    border: 1px solid #808080;
    
    background-image: url("../images/sights.jpeg");
    background-repeat: no-repeat;
    background-position: center center;
}

.bg-size-wrap .px      { background-size: 180px 100px;}
.bg-size-wrap .percent { background-size: 80% 50%;}
.bg-size-wrap .contain { background-size: contain;}
.bg-size-wrap .cover   { background-size: cover;}

5、背景定位

background-position 属性用于设置背景图片在元素内出现的位置。使用这个属性主要分为两类实际情况：第一类情况就是当背景图片的尺寸小于元素尺寸时，通过 ”0“ 或 ”正数值“ 去进行定位；第二类情况就是当背景图片的尺寸大于元素尺寸时，通过 “0”或“负数值”去进行定位。这是采用“CSS图片精灵（CSS Sprites）”技术来开发项目的时候必用的属性。（点击制作CSS雪碧图 )。

该属性的值有三种形式：

方位英文单词

可以有“left”、“right”、“top”、“bottom”和“center”。用法如：“left top”（默认），设置背景图在元素内的“左上方”；“right bottom”，设置背景图在元素内的“右下方”；“center center”，设置背景图在元素的“中心”。
百分比单位

用法如：“0% 50%”，设置背景图在元素内“水平方向”的“左方”，垂直方向的“中心”；“50% 50%”,，设置背景图在元素内的“中心”；“100% 100%”,，设置背景图在元素内的“右下方”。
像素单位

背景图的“左上角”相对于元素“左上角”偏移的距离，如“10px 20px”，设置背景图“水平向右”偏移10像素，“垂直向下”偏移20像素。

这三种形式去设置背景图片的位置是可以“混搭”的，如：“left 100%”、“50% 70px”、“top 30px”等。不过从代码规范性的角度出发，并不推荐这种“混搭”的方式。

6、背景固定

background-attachment 属性用于固定背景图，其主要有两个值：

fixed：页面出现滚动条后就算页面滚动，背景图也会固定在原来的位置不会跟随页面滚动。
scroll：默认值，当页面滚动的时候，背景图也跟随页面同步滚动。

7、背景裁切

background-clip 属性是规定背景显示的范围，是从“border”开始，是从“padding”开始，还是从“content”开始，它有以下值：

border-box：默认，背景的覆盖范围从“border”开始
padding-box：背景的覆盖范围从“padding”开始
content-box：背景的覆盖范围从“content”开始

<div class="bg-clip-wrap">
    <section class="item border-box"></section>
    <section class="item padding-box"></section>
    <section class="item content-box"></section>
</div>

.bg-clip-wrap {
    text-align: center;
}
.bg-clip-wrap .item {
    width:  200px;
    height: 130px;

    display: inline-block;
    margin: 0px 30px;
    padding: 10px;
    border: 10px dashed #800080;
    
    background-image: url("../images/sights.jpeg");
}

.bg-clip-wrap .border-box  { background-clip: border-box; }
.bg-clip-wrap .padding-box { background-clip: padding-box;}
.bg-clip-wrap .content-box { background-clip: content-box;}

8、背景起始位置（了解）

background-origin 设置背景图像开始的位置，它和 background-clip 的使用方式十分相似，二者的区别在于 background-clip 主要是设置裁切范围，而 background-origin 主要是设置背景图片的起始位置，即从什么位置开始显示图片。该属同样的有以下3个属性值：

border-box：默认，背景的覆盖范围从“border”开始
padding-box：背景的覆盖范围从“padding”开始
content-box：背景的覆盖范围从“content”开始

<div class="bg-origin-wrap">
    <section class="item border-box"></section>
    <section class="item padding-box"></section>
    <section class="item content-box"></section>
</div>

.bg-origin-wrap {
    text-align: center;
}

.bg-origin-wrap .item {
    width:  200px;
    height: 130px;

    display: inline-block;
    margin: 0px 30px;
    padding: 10px;
    border: 10px dashed #800080;
    
    background-image: url("../images/sights.jpeg");
}

.bg-origin-wrap .border-box  { background-origin: border-box;}
.bg-origin-wrap .padding-box { background-origin: padding-box;}
.bg-origin-wrap .content-box { background-origin: content-box;}

9、背景组合值

在实际的开发过程中为了节省代码量，减小维护难度，我们通常会采用组合值的写法去设置背景，通常是下面这种模式：

background: color image repeat attachment position;

以上属性也可以省略，只设置其中一个，其中“background-clip”、“background-size”及“background-orign”需单独设置。

三、元素渐变

渐变是从一种颜色逐渐蜕变到另一种颜色，通过 background 属性可以实现元素的渐变效果。在CSS3中渐变主要有两种类型：线性渐变和径向渐变。线性渐变就是沿着一根轴线（水平、垂直或某个角度）改变颜色，从起点到终点颜色进行顺序渐变。

1、线性渐变 *

创建线性渐变你需要指定渐变的轴线和延轴线变化的多种颜色，颜色将按与轴线垂直的方向被绘制，多种颜色间将实现渐变平滑过渡。具体语法如下：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
- <angle>
  
  0deg 表示垂直向上，然后按顺时针方向增加角度，90deg 指向右边。
- side-or-corner

可以组合使用，如"to top left"就是到左上角。

> 可以将轴线的绘制方式理解为：从元素的中心开始，延指定的角度向元素的两个方向扩展，轴线的结束点就是延指定角度前进与元素边框相交的点，而轴线的开始点就是延指定角度反方向前进与元素边框相交的点。

下面我们来看一组示例：

<div class="wrap">
    <section class="t1"></section>
    <section class="t2"></section>
    <section class="t3"></section>
    <section class="t4"></section>
</div>

.wrap > section {
    width:  300px;
    height: 200px;
    display: inline-block;
}

.t1 {  background: linear-gradient(to top, red, green, blue);  }
.t2 {  background: linear-gradient(to right, red, green, blue);  }
.t3 {  background: linear-gradient(to bottom right, red, green, blue);  }
.t4 {  background: linear-gradient(45deg, red, green, blue);  }

需要提出的是在支持CSS3最开始的版本，也就是现在来说叫老版本的主流浏览器（Chrome,Safari,fiefox），对角度的“理解”是不一样的，它们的开始角度0度是从水平的右方，也就是“三点钟方向”开始的。所以在遇到老版本的主流浏览器时要能正确的区分。

2、重复线性渐变 *

重复线性渐变就是线性渐变的重复版本 repeating-linear-gradient，当你定义好了你的线性渐变方式后，重复线性渐变会基于轴线不断的重复你的渐变方式，直到占满整个背景。使用重复线性渐变的关键是你需要定义好颜色结点，需要注意的是你定义的最后一种颜色将和第一种颜色相接在一起，处理不当将导致颜色的急剧变化。

下面通过一些例子来说明重复线性渐变的使用方法。

<div class="wrap">
    <section class="t1"></section>
    <section class="t2"></section>
    <section class="t3"></section>
</div>

.wrap > section {
    width:  300px;
    height: 200px;
    display: inline-block;
}

.t1 {  background: repeating-linear-gradient(#000 0px, #fff 20px, #808080 40px);  }
.t2 {  background: repeating-linear-gradient(90deg, #000 0px, #fff 20px, #808080 40px);  }
.t3 {  background: repeating-linear-gradient(to top right, #000 0px, #fff 20px, #808080 40px);  }

1）、颜色节点

颜色结点是沿着渐变轴线被放置的点，定义格式如下：

<color-stop> = <color> [ <percentage> | <length> ]

首先制定颜色（color），然后指定位置，使用百分比值或者长度值表示。百分比值对应轴线长度的百分比，0%表示起始点，而100%表示结束点；长度值指从轴线的起始点开始向结束点方向计算的数值。颜色结点通常放置在起始点和结束点之间，但不是必需的，轴线可以在两个方向上无限扩展，而颜色结点可以放置在线上的任何位置。

在每个颜色结点，线呈现为颜色结点的颜色。在两个颜色结点之间，线呈现的为从一种颜色过渡到另一种颜色过渡过程。在第一个颜色结点之前，线呈现为第一个颜色结点的颜色，而在最后一个结点之后，线呈现为最后一个颜色结点的颜色。

以下步骤定义了处理颜色结点列表的行为，应用这些规则后，所有的颜色结点都将有一个明确的位置：

如果没有设置第一个颜色结点的位置，默认为0%；如果没有设置最后一个颜色结点的位置，默认设置为100%；
如果一个颜色结点的位置小于了在它之前的任意一个颜色结点的位置，设置其位置等于它之前的所有颜色结点位置中最大的位置；
如果存在一些颜色结点没有指定位置，那么，为那些相邻的没有指定位置的颜色结点，设置它们的位置使它们平均占据空间。
如果多个颜色结点有相同的位置，它们产生一个从一种颜色到另一种颜色的急剧的转换。从效果来看，就是从一种颜色突然改变到另一种颜色。

为了理解上面的规则，下面是一些例子来帮助你的理解：

repeating-linear-gradient(black, white 20%, gray)

相当于

repeating-linear-gradient(black 0%, white 20%, gray 100%)
repeating-linear-gradient(black 40%, white, gray, orange)

相当于

repeating-linear-gradient(black 40%, white 60%, gray 80%, orange 100%)
repeating-linear-gradient(black -50%, white, gray)

相当于

repeating-linear-gradient(black -50%, white 25%, gray 100%)
repeating-linear-gradient(black -50px, white, gray); 相当于 repeating-linear-gradient(black -50px, white calc(-25px + 50%), gray 100%);
repeating-linear-gradient(black 20px, white 0, gray 40px);

相当于

repeating-linear-gradient(black 20px, white 20, gray 40px);
repeating-linear-gradient(purple, gray -50%, black 150%, green);

相当于

repeating-linear-gradient(purple 0%, gray 0%, black 150%, green 150%);
repeating-linear-gradient(black 30px, white 0px , red, blue 50px);

相当于

repeating-linear-gradient(black 30px, white 30px , red 40px, blue 50px);

2）、条纹背景

在讲解颜色结点时，我们提到“如果多个颜色结点有相同的位置，它们产生一个从一种颜色到另一种颜色的急剧的转换。从效果来看，就是从一种颜色突然改变到另一种颜色”。根据这个定义，我们只需要将多个颜色结点设置到同一个位置，就可以轻易的得到条纹背景效果。下面我们来看各种条纹背景是怎么产生的。

水平条纹背景

将两种颜色的颜色结点位置设置为一样就可以产生条纹背景，如下：

background: linear-gradient(black 50%, gray 50%);

利用背景的重复机制，我们可以创造出更多的条纹：

background: linear-gradient(black 50%, gray 0);

background-size: 100% 20%;

这样我们就利用将整个背景划分为了10个条纹，但每个条纹的高度并不一定要一样，只要改变比例就可以做到：

background: linear-gradient(black 80%, gray 0);

background-size: 100% 20%;
垂直条纹背景

垂直条纹背景类似，只是需要转换一下宽和高的设置方式（background-size），如下：

linear-gradient(to right, black 50%, gray 0);

background-size: 25% 100%;
对角条纹背景

我们可以使用重复线性渐变轻易的创建出对角条纹背景：

repeating-linear-gradient(45deg, #808080, #808080 10%, #000 0, #000 20%);

3、径向渐变

径向渐变就是从一个点开始向外扩展为一个圆形或者椭圆，因此，径向渐变首先需要确定一个中心点，然后是大小和形状。径向渐变的颜色节点同线性渐变一样，是一个颜色列表。下面是径向渐变的语法：

<radial-gradient> = radial-gradient (
 [ [ <shape> || <size> ] [ at <position> ]? , |
  at <position>,
 ]?
 <color-stop> [ , <color-stop> ]+
)

下面是径向渐变的一个例子：

background: radial-gradient(30px circle at center center, #fff, #000);

下面是我们来具体看看 radial-gradient 的参数的含义。

shape：shape可以是 circle 或 ellipse，决定了径向渐变最终形成的形状。
size：决定渐变的大小。可以指定的具体的数值或者使用常量，circle和ellipse都支持的常量如下：

1）、closest-side

从渐变的中心出发到最近的一条边的距离作为渐变的大小。如果是椭圆，则以两个方向的最短距离为准。

background: radial-gradient(closest-side circle at center center, #fff, #000);

background: radial-gradient(closest-side ellipse at center center, #fff, #000);

2）、farthest-side

和closest-side类似，但是基于最远的边。

background: radial-gradient(farthest-side circle at center center, #fff, #000);

background: radial-gradient(farthest-side ellipse at center center, #fff, #000);

3）、closest-corner

从渐变的中心出发到最近的一条角的距离作为渐变的大小。如果是椭圆，渐变的大小的横宽比例同指定"closest-side"时的横宽比例。

background: radial-gradient(closest-corner circle at center center, #fff, #000);

background: radial-gradient(closest-corner ellipse at center center, #fff, #000);

4）、farthest-corner

和closest-corner类似，但是基于最远的角。如果是椭圆，渐变的大小的横宽比例同指定"farthest-side"时的横宽比例。

background: radial-gradient(farthest-corner circle at center center, #fff, #000);

background: radial-gradient(farthest-corner ellipse at center center, #fff, #000);

5）、<length>

length为单个数字，指定圆的半径。不允许负值。

6）、[ <length> | <percentage> ]{2}

如果shape被忽略，或者指定为ellipse，则size可以采用上述方法设置，length为数字，percentage指定百分比，2个数值分别指定椭圆的宽和高。不允许负值。

position

决定渐变的中心。定义方法为：x, y

x可选值：percentage、length、left、center、right；

y可选值：percentage、length、top 、center、bottom ；

如果忽略该值，则使用默认值center。
color-stop

颜色节点放置在渐变线上，渐变线从渐变的中心开始向右扩展。0%位于渐变线的起点，100%位于渐变线的终点（与渐变边界相交）。颜色节点值可以为负，虽然渐变线的负值区域不能直接呈现，但却可能影响到非负区域的颜色。颜色节点的使用方法同线性渐变。

径向渐变实例：

以下三种方式都能达到上面的效果

background: radial-gradient(#fff, #808080);
background: radial-gradient(ellipse at center, #fff 0%, #808080 100%);
background: radial-gradient(farthest-corner at 50% 50%, #fff, #808080);

background: radial-gradient(circle, #fff, #000);

background: radial-gradient(farthest-side at left bottom, #000, #fff 50px, #808080);

background: radial-gradient(closest-side at 20px 30px, #000, #fff, #808080);

4、重复径向渐变

类似于重复线性渐变，径向渐变也有自己的重复版本 repeating-radial-gradient，使用方式也是和重复线性渐变类似的。

background: repeating-radial-gradient(#000, #fff 20px, #808080 40px);

第07章 元素背景