精確控制背景圖片在元素中的位置
可以把圖片設置為元素的背景，而且也能讓它鋪滿或者不鋪滿，那么我們同時也能將圖片放到一個固定的位置。
需要通過background-position用來精確控制背景 圖片在元素中的位置。
通過三種方式來確定圖片在水平方向 和垂直方向的起點。
關鍵字：top right bottom left center
百分比
數值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景與偏移量</title>
<style>
.box1{
width: 1072px;
height: 560px;
background-color: red;
margin: 0 auto;
background-image: url(img/002.jpg);
background-repeat: no-repeat;
/*可以通過數值來指定相對位置*/
background-position: 50px 50px;
/*通過關鍵字來設置方向*/
/*background-position: bottom right;*/
/*background-position: left;*/
/*通過設置頁面的百分比來指定位置*/
/*background-position: 50% 50%;*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
注意寫對圖片的路徑，不然圖片無法顯示。
背景圖片的固定
通過背景圖片的固定，我們也能實現猶如網站的購物車圖標，不會隨著屏幕的滾動而變化。在設置背景圖片的時候，最好是設置在<body>內，這樣不會因為其他元素的滾動而消失。
CSS Sprite
CSS Sprites是一種網頁圖片應用處理方式。
好處：
通過這種方式我們可以將網頁中的零星圖片集中放到一張大圖上，這樣只需要網頁發送一次請求。
一次請求便可以同時加載多張圖片，大大提高了圖片的加載效率，提高了訪問效率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按鈕</title>
<style type="text/css">
/*如果我們在不同的狀態時，傳入三張圖片，那么在點擊時會閃爍，而且瀏覽器請求次數增加，每次都得傳入圖片，增加傳輸速度。*/
/*不寫圖片的位置的時候，就是傳入了固定的位置
而且加載了三次，降低訪問次數，增加流量。
*/
/*只寫圖片位置的時候，就是傳入了一張整合過得圖片
通過移動圖片的位置來顯示我們所需要的樣子*/
.btn:link{
display: block;
width: 93px;
height: 29px;
background-image:url(img/btn.png);
background-repeat: no-repeat;
}
.btn:hover{
background-position: -93px 0px;
/*background-image: url(img/hover.png);*/
}
.btn:active{
background-position: -186px 0px;
/*background-image: url(img/active.png);*/
}
</style>
</head>
<body>
<a href='#' class="btn"></a>
</body>
</html>
上面代碼中，要么寫圖片路徑在hover 和 acitve中不寫位移，那這就是傳入三次圖片，要么就是不寫路徑，通過傳入一張整合以后的圖片，來進行移動，實現我們想要看到的效果。提交加載速度。
