background（背景）

background-color（背景颜色）

background-color设置背景颜色

示例：

		background-color:#bfa;

---

background-image（背景图片）

background-image设置背景图片

示例：

		background-image:url("")

注：

1、可以同时设置背景图片和背景颜色，这样背景颜色将会称为图片的背景色

2、如果背景的图片小于元素，则背景图片会自动在元素中平铺，将元素铺满

3、如果背景的图片大于元素，将会有一部分背景无法完全显示

4、如果背景的图片和元素一样大，则正常显示

---

background-repeat（设置背景的重复方式）

可选值：

		repeat				默认值，背景会沿着x轴、y轴双方向重复
		
		repeat-x			沿着x轴方向重复
		
		repeat-y			沿着y轴方向重复
		
		no-repeat			背景图片不重复

---

background-position（设置背景图片的位置）

设置方式：

1、通过top、left、right、bottom、center几个表示方位的词来设置背景图片的位置

示例：
		background-position:top center;
		
		background-position:top	right;
	
		background-position:center center;
	

注：

指定方位词时，必须要同时指定两个值，如果只写一个，则第二个值默认为center

2、通过偏移量来指定背景图片的位置

 

        两个值分别是：水平方向的偏移量、垂直方向的偏移量

示例：
		background-position:-50px 300px;

---

background-clip（设置背景的范围）

可选值：

border-box			默认值，背景会出现在边框的下边

padding-box			背景不会出现在边框，只出现在内容区和内边距

content-box			背景只会出现内容区

---

background-origin（背景图片偏移量计算原点）

可选值：

padding-box		默认值，background-position从内边距处开始计算

content-box			背景图片的偏移量从内容区处计算

border-box			背景图片的偏移量从边框处开始计算

---

background-size（设置背景图片的大小）

1、第一个值表示宽度，第二个值表示高度

2、若只写一个，则第二个值默认是auto

可选值：

		cover 		图片的比例不变，将元素铺满
		
		contain		图片的比例不变，将图片在元素中完整显示

示例：
		background-size: 100px 100px;
	 	background-size: 100px;//只写一个值，第二个值为auto
	 	background-size: cover;
		background-size: contain;

---

background-attachment（背景图片是否跟随元素移动）

可选值：

		scroll	默认值，背景图片会跟随元素移动
		
		fixed		背景会固定在页面中，不会跟随元素移动

---

background（背景相关的简写属性）

a）所有背景相关的样式都可以通过该样式来设置

b）该样式没有顺序要求，也没有哪个属性是必须写的

示例：
	background:url('') #bfa center center/contain no-repeat

注：

1、background-size的属性必须写在background-position的后面，且用斜杠 / 隔开

2、background-origin、background-clip 两个样式，origin在clip的前边