最近在項(xiàng)目中需要大量的用到很多標(biāo)簽按鈕什么的零碎圖片，加上一直沒(méi)機(jī)會(huì)使用Css中的”精靈技術(shù)“，這里把我對(duì)background-position的理解寫(xiě)成文檔供更多人使用學(xué)習(xí)。

現(xiàn)有所有按鈕圖片的合體

第一步：我們要顯示　　這個(gè)按鈕，那么我們要先定義一個(gè)div（后面我們稱(chēng)為視窗）標(biāo)簽，寬度和高度剛好能把這個(gè)按鈕裝下就行。

第二步：這里便是我今天說(shuō)的重點(diǎn)。很多人說(shuō)background-position是操作的背景圖，我卻說(shuō)是操作的這個(gè)視窗，透過(guò)視窗我們能看到背景圖上的一部分而已。

橫縱坐標(biāo)的理解是，只要這個(gè)視窗在圖片的區(qū)域內(nèi)移動(dòng)我們都說(shuō)是負(fù)方向的（負(fù)坐標(biāo)）。

顯示這個(gè)圖片按鈕，我們不需要指定坐標(biāo)，默認(rèn)的就是他。當(dāng)然也可以  #div5{background-position: 0px 0px;}

顯示這個(gè)圖片按鈕，就必須的設(shè)置background-position的坐標(biāo)了，#div6{ background-position:-42px 0px;}

顯示這個(gè)圖片按鈕，#div8{ background-position:-42px -41px;}

后面的以此類(lèi)推。

我這里所說(shuō)的可能大家很多都懂，我只是說(shuō)給一些剛?cè)腴T(mén)的朋友 的一種理解方法而已，如果有不對(duì)的請(qǐng)大家使勁拍。（不會(huì)排版，望理解誒）