1、background-color
background 是复合属性。
background-color:背景色。
色值表示法：#ff0000 ，red ，rgb(255,0,0)，rgba(255,0,0,.5)
背景色渲染位置：border以内。
2、background-image
background-image：背景图
url：统一资源定位符，图片的地址
属性值：绝对路径，相对路径。（网址形式）
例：
background-image:url(images/meng.jpg);
背景图渲染位置在border以内。
背景图渲染在背景色之上。
3、background-repeat
background-repeat：背景重复
属性值：
repeat：默认值，铺满整个盒子
no-repeat：只出现一次，不重复
repeat-x：只在X轴重复
repeat-y：只在Y轴重复
4、background-attachment
background-attachment：背景是否卷动
属性值：
scroll：默认值，背景图随页面滚动
fixed：背景图固定
5、background-position
background-position：背景图在整个大背景中的位置。
第一个参数：背景图相对于整个大背景左顶点的水平方向的偏移量
第二个参数：背景图相对于整个大背景左顶点的垂直方向的偏移量
（正值表示向右、下移动；负值表示向左、上移动）。
①像素表示法：
background-position:100px 150px;
②精灵图
css精灵图技术：css sprite
网页上有很多小的碎图片，每一个图片加载都会发起一次http请求，这些小图片会发起很多http请求，降低网页的加载速度。把很多小碎图片放在一张图片上，只会发起一次http请求，提高网页的加载速度。这种技术就是css精灵图技术。
得到精灵图上的任意一个小图片只需要：①限制盒子的宽高。②通过background-position得到任一位置图片。
③单词表示法
background-postion:X轴 Y轴；
X轴：left right center;
Y轴：top bottom center;
例：
background-position:right bottom;（右下角）
background-position：right center;(水平居右，垂直居中）
应用：
body背景图的居中
background-image:url();
background-position:center top;
background-repeat:no-repeat;
background-color:#000;(不留白，色值由背景图边缘的颜色决定）
通栏大banner
width:100%;
height:500px;(通栏大banner的高一般设置为500px左右）
background-image:url();
background-position:center top;
background-repeat:no-repeat;
background-color:#000;(不留白，色值由背景图边缘的颜色决定）
④百分比表示法
background-position:100% 100%；
百分数和像素的转换：
水平方向：100%：大背景的宽-背景图的宽
垂直方向：100%：大背景的高-背景图的高
background-position:50% 50%；水平、垂直居中
复合写法：
background:red url() no-repeat center top fixed;
background复合写法没有特殊顺序，唯独background-position的两个参数不能颠倒顺序。
…………………………………………………………………………………………………
css3新增属性：
1、background-origin 背景起源
例：
background-origin :content-box； // 内容盒
2、background-clip 背景裁切
background-clip:content-box； // 裁掉的是padding区域的背景图，只留下内容盒部分
background-image：url();
background-origin :content-box；
background-clip:content-box；
等价写法：
background：url() content-box;
3、background-size 背景尺寸
第一个参数：背景图片的宽度
第二个参数：背景图片的高度
①像素表示法
例：
background-size：300px 500px;
②百分比表示法
例：
background-size：50% 25%;（背景图片宽是盒子宽的一半，背景图片高是盒子高的25%）
③单词表示法
cover：覆盖，尽可能大（背景图片不扭曲变形，同时设置background-repeat：no-repeat,可以一张图片铺满整个盒子不留空白）
background-size:cover；
contain：容纳，显示背景图片的全部内容，背景图片也不会扭曲变形，可能会有空白区域
background-size:contain；
background-size与精灵图的结合：
精灵图原始大小：
div.box1{
width: 114px;
height: 18px;
background: url(images/icons.png) no-repeat -55px -529px;
}
精灵图扩大一倍：
div.box2{
width: 228px;
height: 36px;
background-image: url(images/icons.png);
background-repeat: no-repeat;
background-size: 440px 1796px;
background-position: -110px -1058px;
}
精灵图缩小一半
div.box3{
width: 57px;
height: 9px;
background-image: url(images/icons.png);
background-repeat: no-repeat;
background-size: 110px 449px;
background-position: -27.5px -264.5px;
}
…………………………………………………………………………………………………
多背景
多背景的设置，用逗号隔开多个背景图片，前面背景剩余的空白区域呈现后面的背景图。
例：background:url(images/baby.png) content-box , url(images/xiaoming.png);
例：
其他属性也是用逗号隔开，表示对应背景图的属性。
background:url(images/baby.png) content-box , url(images/xiaoming.png);
background-repeat: no-repeat,no-repeat;
background-position: 10px 10px,20px 20px;
background-size: 150px 150px, cover;
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
display: block;
width: 250px;
height: 60px;
margin:100px auto;
border-radius:10px;
box-shadow:0 0 2px rgba(0,0,0,.3);
font-size: 30px;
line-height: 60px;
text-align: center;
color:#fff;
text-decoration: none;
font-weight: bold;
text-shadow: 0 0 1px black;
background-image: url(images/paopao.png),url(images/paopao.png),-webkit-linear-gradient(top,#6abeff,#1778c3);
background-position: top left,bottom right;
transition:all 1s ease 0s;
}
a:hover{
background-position: bottom right,bottom left;
}
</style>
</head>
<body>
<a href="">注 册</a>
</body>
</html>
