CSS從大圖中摳取小圖完整教程(background-position應用)
相信很多喜歡研究網頁界面的童鞋都遇到過一個奇妙的現象：網頁中很多圖片素材被合成在一張圖片上。
起初小菜模仿網站的時候，經常遇到這個現象，那時候也不知道這時什么技術，人家的整張圖片素材不會利用，只能用ps切圖，切成單個的再用。。。
其實，這是一個非常簡單的技術，就是因為想象的太難了，才一直找不到問題的關鍵。
要想實現CSS摳圖，只需要用到一個屬性：background-position。
按照字面理解，這個屬性就是背景定位，先看看google網站的素材圖，如下：
假如小菜現在想做一個+1按鈕，利用上邊的素材圖，普通狀態顯示A圖，鼠標移上去顯示后顯示B圖，實現這么一個動態效果。
按鈕是用來實現功能的，一般是用超鏈接響應單擊事件，但是不能把背景圖直接加在超鏈接上，那樣就不叫樣式啦，因為超鏈接的文本長度變化時，樣式也變了。
地球人一般的做法是，div里邊套一個超鏈接，超鏈接負責實現功能，div負責裝載背景圖。html結構如下：
1 <div class="btn"> 2 <a href="http://www.kpdown.com">+1</a> 3 </div>
有了html骨架，接下來就要寫css樣式啦。
假如我們什么都不考慮，直接把整張圖片設為背景，樣式如下：
1 .btn{
2 background:url(bg.png);
3 }
效果如圖：
div是塊級元素，默認是占一行的，這個先不用關心，但看到背景圖重復了，這顯然不是我們想要的，加上background-repeat:no-repeat;屬性，改進樣式如下：
1 .btn{
2 background:url(bg.png);
3 background-repeat:no-repeat;
4 }
這樣就不重復了。
div可以理解成一個矩形框，它的左上角是頂點，背景圖片的頂點也是左上角，div加載背景圖時，會把兩個頂點重合，頂點的坐標是(0,0)。不理解的看圖，很簡單的。。。
+1的小圖片混雜在大圖中，想提取出來，需要用background-position屬性，這個屬性相當於大圖片不動，把div的頂點進行移動，移動到目標小圖的頂點位置，如下圖：
這樣一來，div中顯示的就是小圖了，但是，顯示的還不僅僅是小圖，而是圖中陰影部分，怎么辦呢？設置一下div的寬、高，讓它和小圖的寬、高一樣就可以了唄！！
再來看看background-position屬性，它有兩個參數，分別是水平方向移動的像素、豎直方向移動的像素，都用負數表示。大圖不動，div移動，也只能是向右、向下移動，只要記住這兩個方向移動的像素都用負數表示就行了！
因此，只要找到小圖相對於大圖左上角頂點的水平移動像素、豎直移動像素就可以了。小菜也不用什么專業工具，用截圖就很方便，從大圖左上角頂點開始截，到小圖頂點那停下來，一看像素就差不多了，然后再調試調試，基本就搞定。
在本例中，A小圖的位移是：-25px -374px，A小圖尺寸是：24px 16px。因此，css樣式如下：
1 .btn{
2 background:url(bg.png);
3 background-repeat:no-repeat;
4 background-position:-25px -374px;
5 height:16px;
6 width:24px;
7 }
效果如下：
這樣就算是把小圖摳出來啦！簡單吧！！
先解釋個問題，圖片上有+1，而我又在超鏈上寫了一個+1，這是因為很多時候文本內容不是寫在圖片上的，那樣靈活性太差，文本就是文本，小菜為了給大家一個完整的演示，因此又寫了一個+1，接下來就處理它！
先把+1居中，居中分為水平居中和垂直居中，水平居中超鏈接，需要在div上設置text-align:center;，這個屬性是對子節點而言的；垂直居中div中的超鏈接，只需要把a標簽的line-height屬性設成和div的高度一樣即可。樣式如下：
1 .btn{
2 background:url(bg.png);
3 background-repeat:no-repeat;
4 background-position:-25px -374px;
5 height:16px;
6 width:24px;
7 text-align:center;
8 }
9 .btn a{
10 line-height:16px;
11 }
效果如下：
接下來呢，還有問題，我們可以發現，只有當鼠標移到+1文本上時，鼠標才會變成手型，才能響應事件。
這顯然不是我們想要的，應該是鼠標移入圖片時，確切的說是鼠標移入div時，就可以變成手型，也能響應事件。
這也簡單，只需要在a標簽(超鏈接)上加display:block;屬性即可。
另外這個下划線比較礙眼，用text-decoration:none;屬性去掉，很常見，就不多說了。
樣式如下：
1 .btn{
2 background:url(bg.png);
3 background-repeat:no-repeat;
4 background-position:-25px -374px;
5 height:16px;
6 width:24px;
7 text-align:center;
8 }
9 .btn a{
10 line-height:16px;
11 display:block;
12 text-decoration:none;
13 }
接下來就剩最后一件事了，那就是鼠標移入的時候切換背景。
本例是div里邊套a標簽，鼠標移入換背景，當然是指鼠標移入div，而且換背景也是換div的背景，可不是a標簽的哦！！
因此要在div標簽上調用hover，div的樣式是btn，因此寫成.btn:hover{}。
換背景還需要找到背景圖片，這又需要摳小圖了，也就是摳上邊指出的B圖。
剛剛顯示的是A小圖，B小圖和A小圖在同一水平線上，因此豎直方向的移動像素是相同的，水平方向差不就是A小圖的水平像素加上A小圖的寬度。
經過測試，B小圖的位移是：-50px -374px，尺寸大小就不用關心了，肯定和A小圖一樣，不一樣就沒法做了。
把B小圖的定位background-position:-50px -374px;放在.btn:hover{}里即可。
樣式如下：
1 .btn{
2 background:url(bg.png);
3 background-repeat:no-repeat;
4 background-position:-25px -374px;
5 height:16px;
6 width:24px;
7 text-align:center;
8 }
9 .btn a{
10 line-height:16px;
11 display:block;
12 text-decoration:none;
13 }
14 .btn:hover{
15 background-position:-50px -374px;
16 }
最終效果-鼠標移入之前：
最終效果-鼠標移入之后：
好啦，教程到這就結束了，小菜只是簡單的演示了一個完整的制作流程，中間還有很多細節問題，比如瀏覽器兼容、CSS優化等等，這就需要讀者自己探索了。
其實小菜一直在說的CSS摳圖，真正的技術名叫CSS Sprite技術，國人習慣叫CSS精靈。
這種技術有好處也有壞處，好處是由於圖片都放在一起，請求時只需請求一張圖片，減少了與服務器的交互次數，還可以解決hover延遲加載的問題。壞處就是不好控制，擴展性不太好，以后有改動，可謂是牽一發而動全身，而且有時會因為屏幕分辨率不同出現背景斷裂現象。
小菜水平有限，文章不足之處，望大神見諒！
附：
小伙伴們，根據所給素材制作如下圖所示的TOP排行新聞列表。
圖片素材:
圖片引用，請使用此地址 http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg
溫馨提示:完成任務后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經掌握此技能，否則，請重復學習此節內容吆。
任務
在右邊代碼編程器中9行處添加以下CSS樣式:
一、定義topList類選擇器，設置其寬為300px，高為180px，邊框線為1px實線 顏色為#E8E8E8，並讓其在頁面中水平居中。
二、去除項目列表項的項目符號，並設置整個列表ul四個方向填充均為5px。
三、設置em標簽樣式為寬20px，高16px，水平居中，不傾斜，顏色為#333，並設置背景圖片。
四、單獨設置.top中的em標簽的背景圖片。
五、控制超鏈接的四種狀態。
提示:
background-position的詳細用法參考http://www.imooc.com/wenda/detail/12584
注意：
1.em為內聯元素，要把他改為塊級元素后，設置的寬度和高度才有效
2.所有em的背景圖片均為num.gif，通過設置background-position屬性來控制不同列表項顯示不同的背景圖片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.10新聞中心制作評測題</title>
<style type="text/css">
/*在此定義相關CSS樣式*/
.topList{
height:180px;
width:300px;
border:1px solid #E8E8E8;
margin:0px auto;
}
.topList ul{
margin:5px 5px;
padding:5px;
}
.topList li{
list-style-type:none;
color:white;
font-size:12px;
margin-left:0px;
}
.topList a{
text-decoration:none;
color:black;
}
.top em{
font-style:normal;
width:20px;
height:16px;
float:left;
background-image:url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) ;
background-position:0px 0px;
margin-right:5px;
text-align:center;
display:block;
}
li em{
font-style:normal;
width:20px;
height:16px;
float:left;
background-image:url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) ;
background-position:0px 16px;
margin-right:5px;
text-align:center;
display:block;
}
.topList p{
}
</style>
</head>
<body>
<div class="topList">
<ul>
<li class="top"><em>01</em>
<p><a href="http://www.imooc.com/" >【慕客訪談用戶篇】“有為屌絲”在路上</a></p>
</li>
<li class="top"><em>02</em>
<p><a href="http://www.imooc.com/">【有獎活動】給父親的三行書信</a></p>
</li>
<li class="top"><em>03</em>
<p><a href="http://www.imooc.com/">《程序猿，請曬出你的童年》活動獲獎公告</a></p>
</li>
<li><em>04</em>
<p><a href="http://www.imooc.com/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p>
</li>
<li><em>05</em>
<p><a href="http://www.imooc.com/">【獲獎公告】追“球”巔峰，爭當“預言帝”</a></p>
</li>
<li><em>06</em>
<p><a href="http://www.imooc.com/">【問卷調查】慕課網用戶學習情況大調查</a></p>
</li>
</ul>
</div>
</body>