相信很多喜歡研究網頁界面的童鞋都遇到過一個奇妙的現象：網頁中很多圖片素材被合成在一張圖片上。

起初小菜模仿網站的時候，經常遇到這個現象，那時候也不知道這時什么技術，人家的整張圖片素材不會利用，只能用ps切圖，切成單個的再用。。。

其實，這是一個非常簡單的技術，就是因為想象的太難了，才一直找不到問題的關鍵。

要想實現CSS摳圖，只需要用到一個屬性：background-position。

按照字面理解，這個屬性就是背景定位，先看看google網站的素材圖，如下：

假如小菜現在想做一個+1按鈕，利用上邊的素材圖，普通狀態顯示A圖，鼠標移上去顯示后顯示B圖，實現這么一個動態效果。

按鈕是用來實現功能的，一般是用超鏈接響應單擊事件，但是不能把背景圖直接加在超鏈接上，那樣就不叫樣式啦，因為超鏈接的文本長度變化時，樣式也變了。

地球人一般的做法是，div里邊套一個超鏈接，超鏈接負責實現功能，div負責裝載背景圖。html結構如下：

有了html骨架，接下來就要寫css樣式啦。

假如我們什么都不考慮，直接把整張圖片設為背景，樣式如下：

效果如圖：

div是塊級元素，默認是占一行的，這個先不用關心，但看到背景圖重復了，這顯然不是我們想要的，加上background-repeat:no-repeat;屬性，改進樣式如下：

這樣就不重復了。

div可以理解成一個矩形框，它的左上角是頂點，背景圖片的頂點也是左上角，div加載背景圖時，會把兩個頂點重合，頂點的坐標是(0,0)。不理解的看圖，很簡單的。。。

+1的小圖片混雜在大圖中，想提取出來，需要用background-position屬性，這個屬性相當于大圖片不動，把div的頂點進行移動，移動到目標小圖的頂點位置，如下圖：