DIV CSS 佈局教程網

最近在項目中需要大量的用到很多標簽按鈕什麼的零碎圖片，加上一直沒機會使用Css中的”精靈技術“，這裡把我對background-position的理解寫成文檔供更多人使用學習。

現有所有按鈕圖片的合體

第一步：我們要顯示　　這個按鈕，那麼我們要先定義一個div（後面我們稱為視窗）標簽，寬度和高度剛好能把這個按鈕裝下就行。

第二步：這裡便是我今天說的重點。很多人說background-position是操作的背景圖，我卻說是操作的這個視窗，透過視窗我們能看到背景圖上的一部分而已。

橫縱坐標的理解是，只要這個視窗在圖片的區域內移動我們都說是負方向的（負坐標）。

顯示這個圖片按鈕，我們不需要指定坐標，默認的就是他。當然也可以  #div5{background-position: 0px 0px;}

顯示這個圖片按鈕，就必須的設置background-position的坐標了，#div6{ background-position:-42px 0px;}

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

後面的以此類推。

我這裡所說的可能大家很多都懂，我只是說給一些剛入門的朋友 的一種理解方法而已，如果有不對的請大家使勁拍。（不會排版，望理解诶）