對(duì)背景圖定位中background-position屬性的自我理解
我要評(píng)論最近在項(xiàng)目中需要大量的用到很多標(biāo)簽按鈕什么的零碎圖片，加上一直沒機(jī)會(huì)使用Css中的”精靈技術(shù)“，這里把我對(duì)background-position的理解寫成文檔供更多人使用學(xué)習(xí)。
現(xiàn)有所有按鈕圖片的合體
第一步：我們要顯示 
這個(gè)按鈕，那么我們要先定義一個(gè)div（后面我們稱為視窗）標(biāo)簽，寬度和高度剛好能把這個(gè)按鈕裝下就行。
第二步：這里便是我今天說的重點(diǎn)。很多人說background-position是操作的背景圖，我卻說是操作的這個(gè)視窗，透過視窗我們能看到背景圖上的一部分而已。
橫縱坐標(biāo)的理解是，只要這個(gè)視窗在圖片的區(qū)域內(nèi)移動(dòng)我們都說是負(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;}
后面的以此類推。
我這里所說的可能大家很多都懂，我只是說給一些剛?cè)腴T的朋友 的一種理解方法而已，如果有不對(duì)的請(qǐng)大家使勁拍。（不會(huì)排版，望理解誒）
相關(guān)文章
在css3中background-clip屬性與background-origin屬性的用法介紹
困惑在哪里？ background-clip 與 background-origin是css3中引入的兩個(gè)跟元素背景相關(guān)的屬性，它們有相同的可選值，即border、padding、content三種，而且這兩個(gè)屬性表示2012-11-13background-postion定位與圖片結(jié)合實(shí)現(xiàn)圓角效果
background-postion 背景默認(rèn)鋪設(shè)位置的起點(diǎn)為：元素的左上角.2011-07-27CSS中背景background-position負(fù)值定位深入理解[圖文]
CSS中背景定位background-position負(fù)值一直是不好理解的難點(diǎn)，一方面用的比較少，另一方面的理解的不夠深入，今天花了點(diǎn)時(shí)間認(rèn)真的思考了，把我的心得寫出來2011-03-21- 背景屬性是給網(wǎng)頁(yè)添加背景色或者背景圖所用的CSS樣式，它的能力遠(yuǎn)遠(yuǎn)超于html之上。2011-01-05
利用CSS定位背景圖片 background-position
我們?cè)谘芯科渌木W(wǎng)站的樣式的時(shí)候經(jīng)常會(huì)發(fā)現(xiàn)一種情況，就是在很多background屬性里都調(diào)用同一張圖片，來滿足網(wǎng)頁(yè)各個(gè)部分的使用。打開這種圖片看一下，會(huì)發(fā)現(xiàn)這張圖片上包2009-12-17CSS background-position的使用說明詳解
設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定 background-image 屬性。該屬性定位不受對(duì)象的補(bǔ)丁屬性( padding )設(shè)置影響2009-12-17CSS background-position 屬性 定位圖片
看別人代碼發(fā)現(xiàn)一個(gè)背景圖中有很多圖片，大家可以參考下原理2009-11-20CSS背景圖坐標(biāo)定位詳解及負(fù)數(shù)的使用技巧
CSS背景圖像定位在布局過程中特別是背景圖比較多的時(shí)候運(yùn)用的比較廣泛一些，在本文為大家詳細(xì)介紹下有關(guān)背景圖定位的知識(shí)及為什么會(huì)有負(fù)數(shù)，感興趣的朋友可以參考下2013-09-08