background背景相關屬性，repeat及attachment，CSS-Sprite圖檔整合

1.background-image屬性

使用background-image來設定背景圖檔， 文法：background-image:url(相對路徑);

如果背景圖檔大于元素，預設會顯示圖檔的左上角， 如果背景圖檔和元素一樣大，則會将背景圖檔全部顯示，如果背景圖檔小于元素大小，則會預設将背景圖檔平鋪以充滿元素。可以同時為一個元素指定背景顔色和背景圖檔，這樣背景顔色将會作為背景圖檔的底色，一般情況下設定背景圖檔時都會同時指定一個背景顔色。

2.background-repeat 屬性

            * background-repeat用于設定背景圖檔的重複方式

                 *     可選值：

                 *         repeat，預設值，背景圖檔會雙方向重複（平鋪）

                 *         no-repeat ，背景圖檔不會重複，有多大就顯示多大

                 *         repeat-x， 背景圖檔沿水準方向重複

                 *         repeat-y，背景圖檔沿垂直方向重複

背景圖檔預設是貼着元素的左上角顯示， 通過background-position可以調整背景圖檔在元素中的位置

可選值：   該屬性可以使用 top right left bottom center中的兩個值來指定一個背景圖檔的位置

                 *             top left 左上

                 *             bottom right 右下

 如果隻給出一個值，則第二個值預設是center，也可以直接指定兩個偏移量，  第一個值是水準偏移量

                 *                 - 如果指定的是一個正值，則圖檔會向右移動指定的像素

                 *                 - 如果指定的是一個負值，則圖檔會向左移動指定的像素

                 *             第二個是垂直偏移量    

                 *                 - 如果指定的是一個正值，則圖檔會向下移動指定的像素

                 *                 - 如果指定的是一個負值，則圖檔會向上移動指定的像素

 3.background-attachment屬性

background-attachment用來設定背景圖檔是否随頁面一起滾動

                 *         可選值：

                 *             scroll，預設值，背景圖檔随着視窗滾動

                 *             fixed，背景圖檔會固定在某一位置，不随頁面滾動

                 * 

                 * 不随視窗滾動的圖檔，我們一般都是設定給body，而不設定給其他元素

4.CSS-Sprite圖檔整合技術

将多個圖檔整合為一張圖檔，需要時一起加載，避免頁面加載時閃動，通過background-position來切換要顯示的圖檔的位置。

    優點：

         *         1 将多個圖檔整合為一張圖檔裡，浏覽器隻需要發送一次請求，可以同時加載多個圖檔，提高通路效率

         *         2 将多個圖檔整合為一張圖檔，減小了圖檔的總大小，提高請求的速度，增加了使用者體驗

舉例：

.btn:link{
				/*将a轉換為塊元素*/
				display: block;
				/*設定寬高*/
				width: 93px;
				height: 29px;
				/*設定背景圖檔*/
				background-image: url(img/btn/btn2.png);
				/*設定背景圖檔不重複*/
				background-repeat: no-repeat;
				
			}
			
			.btn:hover{
				
				/*
				 * 當是hover狀态時，希望圖檔可以向左移動
				 */
				background-position: -93px 0px;
			}
			
			.btn:active{
				/*
				 * 當是active狀态時，希望圖檔再向左移動
				 */
				background-position: -186px 0px;