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>
