? ? ? ?轉(zhuǎn)：http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html

?

相信很多喜歡研究網(wǎng)頁(yè)界面的童鞋都遇到過(guò)一個(gè)奇妙的現(xiàn)象：網(wǎng)頁(yè)中很多圖片素材被合成在一張圖片上。

?????? 起初小菜模仿網(wǎng)站的時(shí)候，經(jīng)常遇到這個(gè)現(xiàn)象，那時(shí)候也不知道這時(shí)什么技術(shù)，人家的整張圖片素材不會(huì)利用，只能用ps切圖，切成單個(gè)的再用。。。

?????? 其實(shí)，這是一個(gè)非常簡(jiǎn)單的技術(shù)，就是因?yàn)橄胂蟮奶y了，才一直找不到問(wèn)題的關(guān)鍵。

?????? 要想實(shí)現(xiàn)CSS摳圖，只需要用到一個(gè)屬性：background-position。

?????? 按照字面理解，這個(gè)屬性就是背景定位，先看看google網(wǎng)站的素材圖，如下：

?????? 假如小菜現(xiàn)在想做一個(gè)+1按鈕，利用上邊的素材圖，普通狀態(tài)顯示A圖，鼠標(biāo)移上去顯示后顯示B圖，實(shí)現(xiàn)這么一個(gè)動(dòng)態(tài)效果。

?????? 按鈕是用來(lái)實(shí)現(xiàn)功能的，一般是用超鏈接響應(yīng)單擊事件，但是不能把背景圖直接加在超鏈接上，那樣就不叫樣式啦，因?yàn)槌溄拥奈谋鹃L(zhǎng)度變化時(shí)，樣式也變了。

?????? 地球人一般的做法是，div里邊套一個(gè)超鏈接，超鏈接負(fù)責(zé)實(shí)現(xiàn)功能，div負(fù)責(zé)裝載背景圖。html結(jié)構(gòu)如下：

1 <div class="btn"> 2 <a href="http://www.kpdown.com">+1</a> 3 </div>

?

?????? 有了html骨架，接下來(lái)就要寫(xiě)css樣式啦。

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

1 .btn{ 2 background:url(bg.png); 3 }

?

???????效果如圖：

?????? div是塊級(jí)元素，默認(rèn)是占一行的，這個(gè)先不用關(guān)心，但看到背景圖重復(fù)了，這顯然不是我們想要的，加上background-repeat:no-repeat;屬性，改進(jìn)樣式如下：

1 .btn{ 2 background:url(bg.png); 3 background-repeat:no-repeat; 4 }

?

?????? 這樣就不重復(fù)了。

?????? div可以理解成一個(gè)矩形框，它的左上角是頂點(diǎn)，背景圖片的頂點(diǎn)也是左上角，div加載背景圖時(shí)，會(huì)把兩個(gè)頂點(diǎn)重合，頂點(diǎn)的坐標(biāo)是(0,0)。不理解的看圖，很簡(jiǎn)單的。。。

?

?????? +1的小圖片混雜在大圖中，想提取出來(lái)，需要用background-position屬性，這個(gè)屬性相當(dāng)于大圖片不動(dòng)，把div的頂點(diǎn)進(jìn)行移動(dòng)，移動(dòng)到目標(biāo)小圖的頂點(diǎn)位置，如下圖：

?????? 這樣一來(lái)，div中顯示的就是小圖了，但是，顯示的還不僅僅是小圖，而是圖中陰影部分，怎么辦呢？設(shè)置一下div的寬、高，讓它和小圖的寬、高一樣就可以了唄！！

?????? 再來(lái)看看background-position屬性，它有兩個(gè)參數(shù)，分別是水平方向移動(dòng)的像素、豎直方向移動(dòng)的像素，都用負(fù)數(shù)表示。大圖不動(dòng)，div移動(dòng)，也只能是向右、向下移動(dòng)，只要記住這兩個(gè)方向移動(dòng)的像素都用負(fù)數(shù)表示就行了！

?????? 因此，只要找到小圖相對(duì)于大圖左上角頂點(diǎn)的水平移動(dòng)像素、豎直移動(dòng)像素就可以了。小菜也不用什么專(zhuān)業(yè)工具，用截圖就很方便，從大圖左上角頂點(diǎn)開(kāi)始截，到小圖頂點(diǎn)那停下來(lái)，一看像素就差不多了，然后再調(diào)試調(diào)試，基本就搞定。

?????? 在本例中，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 }

?

????????效果如下：

??????? 這樣就算是把小圖摳出來(lái)啦！簡(jiǎn)單吧！！

??????? 先解釋個(gè)問(wèn)題，圖片上有+1，而我又在超鏈上寫(xiě)了一個(gè)+1，這是因?yàn)楹芏鄷r(shí)候文本內(nèi)容不是寫(xiě)在圖片上的，那樣靈活性太差，文本就是文本，小菜為了給大家一個(gè)完整的演示，因此又寫(xiě)了一個(gè)+1，接下來(lái)就處理它！

??????? 先把+1居中，居中分為水平居中和垂直居中，水平居中超鏈接，需要在div上設(shè)置text-align:center;，這個(gè)屬性是對(duì)子節(jié)點(diǎn)而言的；垂直居中div中的超鏈接，只需要把a(bǔ)標(biāo)簽的line-height屬性設(shè)成和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 }

?

????????效果如下：

?

???????接下來(lái)呢，還有問(wèn)題，我們可以發(fā)現(xiàn)，只有當(dāng)鼠標(biāo)移到+1文本上時(shí)，鼠標(biāo)才會(huì)變成手型，才能響應(yīng)事件。

???????這顯然不是我們想要的，應(yīng)該是鼠標(biāo)移入圖片時(shí)，確切的說(shuō)是鼠標(biāo)移入div時(shí)，就可以變成手型，也能響應(yīng)事件。

???????這也簡(jiǎn)單，只需要在a標(biāo)簽(超鏈接)上加display:block;屬性即可。

???????另外這個(gè)下劃線(xiàn)比較礙眼，用text-decoration:none;屬性去掉，很常見(jiàn)，就不多說(shuō)了。

???????樣式如下：

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 }

?

?????? 接下來(lái)就剩最后一件事了，那就是鼠標(biāo)移入的時(shí)候切換背景。

?????? 本例是div里邊套a標(biāo)簽，鼠標(biāo)移入換背景，當(dāng)然是指鼠標(biāo)移入div，而且換背景也是換div的背景，可不是a標(biāo)簽的哦！！

?????? 因此要在div標(biāo)簽上調(diào)用hover，div的樣式是btn，因此寫(xiě)成.btn:hover{}。

?????? 換背景還需要找到背景圖片，這又需要摳小圖了，也就是摳上邊指出的B圖。

?????? 剛剛顯示的是A小圖，B小圖和A小圖在同一水平線(xiàn)上，因此豎直方向的移動(dòng)像素是相同的，水平方向差不就是A小圖的水平像素加上A小圖的寬度。

?????? 經(jīng)過(guò)測(cè)試，B小圖的位移是：-50px -374px，尺寸大小就不用關(guān)心了，肯定和A小圖一樣，不一樣就沒(méi)法做了。

?????? 把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 }

?

??????? 最終效果-鼠標(biāo)移入之前：

???

?????? ?最終效果-鼠標(biāo)移入之后：

??

?????? 好啦，教程到這就結(jié)束了，小菜只是簡(jiǎn)單的演示了一個(gè)完整的制作流程，中間還有很多細(xì)節(jié)問(wèn)題，比如瀏覽器兼容、CSS優(yōu)化等等，這就需要讀者自己探索了。

?????? 其實(shí)小菜一直在說(shuō)的CSS摳圖，真正的技術(shù)名叫CSS Sprite技術(shù)，國(guó)人習(xí)慣叫CSS精靈。

?????? 這種技術(shù)有好處也有壞處，好處是由于圖片都放在一起，請(qǐng)求時(shí)只需請(qǐng)求一張圖片，減少了與服務(wù)器的交互次數(shù)，還可以解決hover延遲加載的問(wèn)題。壞處就是不好控制，擴(kuò)展性不太好，以后有改動(dòng)，可謂是牽一發(fā)而動(dòng)全身，而且有時(shí)會(huì)因?yàn)槠聊环直媛什煌霈F(xiàn)背景斷裂現(xiàn)象。

轉(zhuǎn)載于:https://www.cnblogs.com/xhqgogogo/p/3830281.html

總結(jié)

以上是生活随笔為你收集整理的CSS从大图中抠取小图完整教程(background-position应用)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。