對背景圖定位中background-position屬性的自我理解

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