1、background-color
background 是復(fù)合屬性。
background-color:背景色。
色值表示法：#ff0000 ，red ，rgb(255,0,0)，rgba(255,0,0,.5)
背景色渲染位置：border以內(nèi)。
2、background-image
background-image：背景圖
url：統(tǒng)一資源定位符，圖片的地址
屬性值：絕對(duì)路徑，相對(duì)路徑。（網(wǎng)址形式）
例：
background-image:url(images/meng.jpg);
背景圖渲染位置在border以內(nèi)。
背景圖渲染在背景色之上。
3、background-repeat
background-repeat：背景重復(fù)
屬性值：
repeat：默認(rèn)值，鋪滿整個(gè)盒子
no-repeat：只出現(xiàn)一次，不重復(fù)
repeat-x：只在X軸重復(fù)
repeat-y：只在Y軸重復(fù)
4、background-attachment
background-attachment：背景是否卷動(dòng)
屬性值：
scroll：默認(rèn)值，背景圖隨頁面滾動(dòng)
fixed：背景圖固定
5、background-position
background-position：背景圖在整個(gè)大背景中的位置。
第一個(gè)參數(shù)：背景圖相對(duì)于整個(gè)大背景左頂點(diǎn)的水平方向的偏移量
第二個(gè)參數(shù)：背景圖相對(duì)于整個(gè)大背景左頂點(diǎn)的垂直方向的偏移量
（正值表示向右、下移動(dòng)；負(fù)值表示向左、上移動(dòng)）。
①像素表示法：
background-position:100px 150px;
②精靈圖
css精靈圖技術(shù)：css sprite
網(wǎng)頁上有很多小的碎圖片，每一個(gè)圖片加載都會(huì)發(fā)起一次http請(qǐng)求，這些小圖片會(huì)發(fā)起很多http請(qǐng)求，降低網(wǎng)頁的加載速度。把很多小碎圖片放在一張圖片上，只會(huì)發(fā)起一次http請(qǐng)求，提高網(wǎng)頁的加載速度。這種技術(shù)就是css精靈圖技術(shù)。
得到精靈圖上的任意一個(gè)小圖片只需要：①限制盒子的寬高。②通過background-position得到任一位置圖片。
③單詞表示法
background-postion:X軸 Y軸；
X軸：left right center;
Y軸：top bottom center;
例：
background-position:right bottom;（右下角）
background-position：right center;(水平居右，垂直居中）
應(yīng)用：
body背景圖的居中
background-image:url();
background-position:center top;
background-repeat:no-repeat;
background-color:#000;(不留白，色值由背景圖邊緣的顏色決定）
通欄大banner
width:100%;
height:500px;(通欄大banner的高一般設(shè)置為500px左右）
background-image:url();
background-position:center top;
background-repeat:no-repeat;
background-color:#000;(不留白，色值由背景圖邊緣的顏色決定）
④百分比表示法
background-position:100% 100%；
百分?jǐn)?shù)和像素的轉(zhuǎn)換：
水平方向：100%：大背景的寬-背景圖的寬
垂直方向：100%：大背景的高-背景圖的高
background-position:50% 50%；水平、垂直居中
復(fù)合寫法：
background:red url() no-repeat center top fixed;
background復(fù)合寫法沒有特殊順序，唯獨(dú)background-position的兩個(gè)參數(shù)不能顛倒順序。
…………………………………………………………………………………………………
css3新增屬性：
1、background-origin 背景起源
例：
background-origin :content-box； // 內(nèi)容盒
2、background-clip 背景裁切
background-clip:content-box； // 裁掉的是padding區(qū)域的背景圖，只留下內(nèi)容盒部分
background-image：url();
background-origin :content-box；
background-clip:content-box；
等價(jià)寫法：
background：url() content-box;
3、background-size 背景尺寸
第一個(gè)參數(shù)：背景圖片的寬度
第二個(gè)參數(shù)：背景圖片的高度
①像素表示法
例：
background-size：300px 500px;
②百分比表示法
例：
background-size：50% 25%;（背景圖片寬是盒子寬的一半，背景圖片高是盒子高的25%）
③單詞表示法
cover：覆蓋，盡可能大（背景圖片不扭曲變形，同時(shí)設(shè)置background-repeat：no-repeat,可以一張圖片鋪滿整個(gè)盒子不留空白）
background-size:cover；
contain：容納，顯示背景圖片的全部?jī)?nèi)容，背景圖片也不會(huì)扭曲變形，可能會(huì)有空白區(qū)域
background-size:contain；
background-size與精靈圖的結(jié)合：
精靈圖原始大?。?br>
div.box1{
width: 114px;
height: 18px;
background: url(images/icons.png) no-repeat -55px -529px;
}
精靈圖擴(kuò)大一倍：
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;
}
…………………………………………………………………………………………………
多背景
多背景的設(shè)置，用逗號(hào)隔開多個(gè)背景圖片，前面背景剩余的空白區(qū)域呈現(xiàn)后面的背景圖。
例：background:url(images/baby.png) content-box , url(images/xiaoming.png);
例：
其他屬性也是用逗號(hào)隔開，表示對(duì)應(yīng)背景圖的屬性。
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="">注 冊(cè)</a>
</body>
</html>
