一、元素的前景层和背景层
元素的前景层包含内容（如文本、图片）和边框，元素的背景层可以是背景色（background-color）或者背景图片（background-image），背景图片叠加在背景颜色之上。
二、CSS背景常用属性
1、背景颜色background-color
前景色会影响元素的内容和边框，分三种情况：
- 若使用边框属性设置了边框颜色，则边框显示为设置的颜色；
- 若边框未使用边框属性设置边框颜色，若该元素设置了color属性，则边框颜色与color值相同；
- 若边框属性和color都未设置，则边框颜色使用默认颜色黑色，color的默认值为黑色。
情况二实例如下：
<div style="width:300px;background-color: aqua;border:4px solid;color:red">
通过这段文字来演示背景颜色属性background-color的作用
</div>
情况三实例如下：
<div style="width:300px;background-color: aqua;border:4px solid;">
通过这段文字来演示背景颜色属性background-color的作用
</div>
2、背景图片background-image
用如下图片作为元素背景图片
结果如下图所示：
<div style="width:300px;height:200px;background-image: url('./sear01.png');border:1px solid ">
测试背景图片
</div>
由上述结果可知：
- 当背景图片小于元素时，背景图片会在水平和垂直的方向重复出现，直至填满整个背景空间
- 默认情况下，背景图片会以元素的左上角为起点，沿着水平和垂直方向重复出现，最终填满整个背景区域。因为元素左上角为起点，所以元素盒子的底部和右侧的圆形图案都只显示了一部分。
3、背景图片background-repeat(即平铺问题)
background-repeat有四个可取值：
- no-repeat：不平铺
- repeat-x：横向平铺（水平方向重复）
- repeate-y：纵向平铺（垂直方向重复）
- repeat：横纵向平铺（默认，水平、垂直方向均重复）
各个取值效果如下所示：
<div style="width:200px;height:100px;background-image: url('./sear01.png');border:1px solid ">
图片重复方式为默认值，水平垂直均重复
</div>
<div style="width:200px;height:100px;background-image: url('./sear01.png');
background-repeat:repeat-x;border:1px solid ">
图片重复方式为水平重复
</div>
<div style="width:200px;height:100px;background-image: url('./sear01.png');
background-repeat:repeat-y;border:1px solid ">
图片重复方式为垂直重复
</div>
<div style="width:200px;height:100px;background-image: url('./sear01.png');
background-repeat:no-repeat;border:1px solid ">
图片重复方式为水平垂直均不重复
</div>
CSS3还规定另外两个值，以控制背景图片的重复次数，即所有图片都是完整的，不会出现半张图片的现象。
4、背景位置background-position
（1）绝对或相对单位的数值
//默认值,元素的左上角
background-position: 0 0;
//把图片向右移动
background-position: 75px 0;
//把图片向左移动
background-position: -75px 0;
//把图片向下移动
background-position: 0 100px;
（2）关键字
水平取值：left center right
垂直取值：top center bottom
使用关键字时，关键字的顺序不重要，即left bottom和 bottom top是相同的。
（3）百分比
使用关键字和百分比的情况下，设定的值同时应用于元素和图片，换句话说，如果设定了20% 20% ,则外部元素水平20%的位置和图片水平20%的位置对齐、外部元素垂直20%的位置和图片垂直20%的位置对齐，如下图所示：
设置背景的区域高度为containerY、宽度为containerX，背景图片的宽度为imgX、高度为imgY，针对对齐点，计算出图片相对于左上角：
top:containerY*20%-imgY*20% = （containerY-imgY）*20%;
left:containerX*20%-imgX*20% = （containerX-imgX）*20%;
进而总结出换算过程为：(设置背景的区域高度 - 背景图的高度) * 百分比（正或负值），如：(100 - 200) * -50% = 50px。
（4）多值
在CSS3中，对background-position属性进行了扩展，允许接受3到4个参数，用于指定背景图的起始方向和具体位置。在此前，比如IE8浏览器，最多支持同时出现两个值，从IE9开始支持同时出现3个或4个值。
5、背景位置background-size
background-size 指定背景图像的尺寸大小，以像素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。
取值形式如下：
background-size : contain | cover | 100px 100px | 50% 100%;
- 关键字：
// 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size：contain;
// 扩展图片来填满元素（保持像素的长宽比）；
background-size ：cover;
- 像素：
background-size ：100px 100px; // 调整图片到指定大小；
- 百分比：
background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。
6、背景粘附：background-attachment
背景是否随上方的内容一起滚动：
- fixed:固定
- scroll：滚动（默认）
7、背景图片简写
background：背景颜色color 背景图片image 背景是否平铺（重复方式)repeat 背景粘附attachment 展开方式水平 展开方式垂直position 图片大小size