這篇文章主要講解了“CSS Sprite從大圖中截取小圖的過程”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS Sprite從大圖中截取小圖的過程”吧！
創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計、成都做網(wǎng)站、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。
相信很多喜歡研究網(wǎng)頁界面的童鞋都遇到過一個奇妙的現(xiàn)象：網(wǎng)頁中很多圖片素材被合成在一張圖片上。
起初小菜模仿網(wǎng)站的時候，經(jīng)常遇到這個現(xiàn)象，那時候也不知道這時什么技術(shù)，人家的整張圖片素材不會利用，只能用ps切圖，切成單個的再用。。。
其實，這是一個非常簡單的技術(shù)，就是因為想象的太難了，才一直找不到問題的關(guān)鍵。
要想實現(xiàn)CSS摳圖，只需要用到一個屬性：background-position。
按照字面理解，這個屬性就是背景定位，先看看google網(wǎng)站的素材圖，如下：
假如小菜現(xiàn)在想做一個+1按鈕，利用上邊的素材圖，普通狀態(tài)顯示A圖，鼠標(biāo)移上去顯示后顯示B圖，實現(xiàn)這么一個動態(tài)效果。
按鈕是用來實現(xiàn)功能的，一般是用超鏈接響應(yīng)單擊事件，但是不能把背景圖直接加在超鏈接上，那樣就不叫樣式啦，因為超鏈接的文本長度變化時，樣式也變了。
地球人一般的做法是，div里邊套一個超鏈接，超鏈接負(fù)責(zé)實現(xiàn)功能，div負(fù)責(zé)裝載背景圖。html結(jié)構(gòu)如下：
代碼如下:
div是塊級元素，默認(rèn)是占一行的，這個先不用關(guān)心，但看到背景圖重復(fù)了，這顯然不是我們想要的，加上background-repeat:no-repeat;屬性，改進樣式如下：
代碼如下:
.btn{
background:url(bg.png);
background-repeat:no-repeat;
}
這樣就不重復(fù)了。
div可以理解成一個矩形框，它的左上角是頂點，背景圖片的頂點也是左上角，div加載背景圖時，會把兩個頂點重合，頂點的坐標(biāo)是(0,0)。不理解的看圖，很簡單的。。。
為背景，樣式如下：</p><p>代碼如下:</p><p><br/>.btn{<br/> background:url(bg.png);<br/>}</p><p>效果如圖：</p><p><img src=)
+1的小圖片混雜在大圖中，想提取出來，需要用background-position屬性，這個屬性相當(dāng)于大圖片不動，把div的頂點進行移動，移動到目標(biāo)小圖的頂點位置，如下圖：
這樣一來，div中顯示的就是小圖了，但是，顯示的還不僅僅是小圖，而是圖中陰影部分，怎么辦呢？設(shè)置一下div的寬、高，讓它和小圖的寬、高一樣就可以了唄??！
再來看看background-position屬性，它有兩個參數(shù)，分別是水平方向移動的像素、豎直方向移動的像素，都用負(fù)數(shù)表示。大圖不動，div移動，也只能是向右、向下移動，只要記住這兩個方向移動的像素都用負(fù)數(shù)表示就行了！
因此，只要找到小圖相對于大圖左上角頂點的水平移動像素、豎直移動像素就可以了。小菜也不用什么專業(yè)工具，用截圖就很方便，從大圖左上角頂點開始截，到小圖頂點那停下來，一看像素就差不多了，然后再調(diào)試調(diào)試，基本就搞定。
在本例中，A小圖的位移是：-25px -374px，A小圖尺寸是：24px 16px。因此，css樣式如下：
代碼如下:
.btn{
background:url(bg.png);
background-repeat:no-repeat;
background-position:-25px -374px;
height:16px;
width:24px;
}
效果如下：
這樣就算是把小圖摳出來啦！簡單吧??！
先解釋個問題，圖片上有+1，而我又在超鏈上寫了一個+1，這是因為很多時候文本內(nèi)容不是寫在圖片上的，那樣靈活性太差，文本就是文本，小菜為了給大家一個完整的演示，因此又寫了一個+1，接下來就處理它！
先把+1居中，居中分為水平居中和垂直居中，水平居中超鏈接，需要在div上設(shè)置text-align:center;，這個屬性是對子節(jié)點而言的；垂直居中div中的超鏈接，只需要把a標(biāo)簽的line-height屬性設(shè)成和div的高度一樣即可。樣式如下：
代碼如下:
.btn{
background:url(bg.png);
background-repeat:no-repeat;
background-position:-25px -374px;
height:16px;
width:24px;
text-align:center;
}
.btn a{
line-height:16px;
}
效果如下：
接下來呢，還有問題，我們可以發(fā)現(xiàn)，只有當(dāng)鼠標(biāo)移到+1文本上時，鼠標(biāo)才會變成手型，才能響應(yīng)事件。
這顯然不是我們想要的，應(yīng)該是鼠標(biāo)移入圖片時，確切的說是鼠標(biāo)移入div時，就可以變成手型，也能響應(yīng)事件。
這也簡單，只需要在a標(biāo)簽(超鏈接)上加display:block;屬性即可。
另外這個下劃線比較礙眼，用text-decoration:none;屬性去掉，很常見，就不多說了。
樣式如下：
代碼如下:
.btn{
background:url(bg.png);
background-repeat:no-repeat;
background-position:-25px -374px;
height:16px;
width:24px;
text-align:center;
}
.btn a{
line-height:16px;
display:block;
text-decoration:none;
}
接下來就剩最后一件事了，那就是鼠標(biāo)移入的時候切換背景。
本例是div里邊套a標(biāo)簽，鼠標(biāo)移入換背景，當(dāng)然是指鼠標(biāo)移入div，而且換背景也是換div的背景，可不是a標(biāo)簽的哦??！
因此要在div標(biāo)簽上調(diào)用hover，div的樣式是btn，因此寫成.btn:hover{}。
換背景還需要找到背景圖片，這又需要摳小圖了，也就是摳上邊指出的B圖。
剛剛顯示的是A小圖，B小圖和A小圖在同一水平線上，因此豎直方向的移動像素是相同的，水平方向差不就是A小圖的水平像素加上A小圖的寬度。
經(jīng)過測試，B小圖的位移是：-50px -374px，尺寸大小就不用關(guān)心了，肯定和A小圖一樣，不一樣就沒法做了。
把B小圖的定位background-position:-50px -374px;放在.btn:hover{}里即可。
樣式如下：
代碼如下:
.btn{
background:url(bg.png);
background-repeat:no-repeat;
background-position:-25px -374px;
height:16px;
width:24px;
text-align:center;
}
.btn a{
line-height:16px;
display:block;
text-decoration:none;
}
.btn:hover{
background-position:-50px -374px;
}
最終效果-鼠標(biāo)移入之前：
最終效果-鼠標(biāo)移入之后：
感謝各位的閱讀，以上就是“CSS Sprite從大圖中截取小圖的過程”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS Sprite從大圖中截取小圖的過程這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
