我們在研究其他的網站的樣式的時候經常會發現一種情況就是在很多background屬性裡都調用同一張圖片來滿足網頁各個部分的使用打開這種圖片看一下會發現這張圖片上包含了很多小圖片比如
又如
這些小圖片就是整圖分割後的各個部分把各個部分放在一張圖片上而不是是分別存儲成單獨的圖片其目的我們都知道就是減少http請求次數節省時間和帶寬
那麼怎麼來實現一張圖片在不同的地方只顯示其中的一部分呢這就用到了我們今天要說的背景圖片的定位問題這個問題相信很多人都郁悶過也經常有朋友問我所以今天就系統的說一下
我們知道在用圖片作為背景的時候css要這樣寫以div容器舉例子也可以是bodytdp等的背景道理一樣
div{ background:#FFF url(image) norepeat fixed x y;}
這裡的background的屬性值依次為
#FFF 背景色（顏色值背景圖片沒有覆蓋的地方或者沒有背景圖片時表現的背景色）
image 背景圖片（這裡是圖片的地址）
norepeat 是否重復（圖片小於容器的大小時默認會重復排列圖片以填滿容器norepeat表示不重復只有這個時候後面的定位坐標才有用）
fixed 背景是否隨容器滾動（有兩個可選值scroll滾動fixed不滾動默認是scroll）
x y 背景圖像的定位（注意只有在norepeat下定位才有意義這個就是今天要講的重點）
背景圖像定位中我們要明確的幾點
兩個值前面一個是橫向的定位我們稱為x軸方向定位後面一個值是縱向的定位我們稱為y軸方向定位如果只有一個值那默認的就是x軸方向這時y軸方向就默認的是上下居中對齊也就是center
坐標軸的原點就是對應容器的左頂點
這個坐標的y軸箭頭朝下也就是右下方（容器內部）x y的值才都為正
x y值分別表示背景圖片的左頂點相對於坐標原點（也就是容器的左頂點）的值
x y的值可以用百分比或者px來表示
x y也可以用leftrighttopbottomcenter這五個對齊方式來表示但注意用leftrighttopbottomcenter來表示的時候應用的是對齊規則而不是坐標規則x為left是表示圖片的左邊和容器的左邊對齊為right的時候表示圖片的右邊和容器的右邊對其y為top的時候表示圖片的頂部和容器的頂部對齊為bottom時表示圖片的底部和容器的底部對齊x y等於center的時候表示居中對齊
x y用百分比或者px表示的時候其值可以為負數我們應用坐標規則就很容易理解負數表示的意義x為負數時候表示圖片左頂點在容器左頂點的左側y為負數時表示圖片的左頂點在容器的左定點的上方也就是向左和向上超出容器的范圍
下面我用幾個圖示來說明一下幾種情況藍色塊表示圖片虛線框表示容器（可以divtd或者直接就是body）注意只有背景圖片在容器內我們才能看見我用白色表示可見部分而且超出容器范圍的是看不見的我用灰色表示容器的左頂點的坐標就是（）
第一張背景圖片和容的左上對齊px px 也可以寫成left top
第二張背景圖在容器中間頂點坐標為正值
第三張背景圖部分在容器左上頂點坐標為負值
到此我們可能就明白了如何用background裡的定位值來准確定位一個背景圖片返回去我們看一下開始的時候介紹的兩個圖片我們就是可以用背景定位和容器內才可見這兩個性質來隨意的調用顯示整張圖片的某一部分
但是我們為了調用方便在排列這些小圖片的時候要講究一點規則比如小圖之間的距離通常是調用小圖的容器的大小或者距離更大一點這樣就可以避免在容器內顯示出我們不願意顯示的圖片！
補充一點如果定位用的是百分比話算法比較特殊我舉個例子
background:#FFF url(image) norepeat fixed % %;
這個時候圖片應該在容器的什麼位置呢算法公式如下
圖片左頂點距容器左頂點的坐標位置為
x（容器的寬度圖片的寬度）x%
y（容器的高度圖片的高度）x（%）
得到的結果應用坐標法則差值如果為負數百分比為正那麼運算結果是負值如果差值為負數百分比也為負數那麼運算結果就是正數總而言之就是這裡的運算符合運算法則把運算的結果帶入坐標法則就能得到圖片的位置
比如容器是widthpxheightpx而圖片是widthpxheightpx
我們用上面的樣式可以得到圖片位置為
x(pxpx)*%
y(pxpx)*(%)
From:http://tw.wingwit.com/Article/program/net/201311/13145.html
