1. 關鍵字, 例如: background-position: top right;
優點: 直觀, 可用性高, 各瀏覽器中表現一致.
缺點: 缺少間隔尺寸. 三個垂直的 (top, center, bottom) 和三個水平的 (left, center, right) 只能為你組合出最多 9 個位置. 不存在其他混式的組合. 并且很難像其他兩種數值定位方法一樣使用算數進行控制.

2. 像素, 例如: background-position: 0px 0px;
優點: 概念容易被理解, 只要知道如何測量容器左上角和圖片左上角之間的距離, 就能準確地推測出圖片顯示的位置. 像素還能夠精確的用數學來控制定位.
缺點: 你必須知道確實的值.
原理, 如圖. 其實就是圖片左上角相對于容器左上角的坐標關系.

3. 百分比, 例如: background-position: 80% 50%;
優點: 可以使用數學來控制定位, 并且比像素定位更加靈活.
缺點: IE 中無法處理復雜的百分比定位.

在制作網頁時, 為什么要將多個圖標放在一個圖片文件里面呢?

經常在網上搜羅資源的朋友可能會發現, 很多網站喜歡將小圖標拼在一個圖片文件里. 然后在 CSS 中通過 background-position 定位訪問圖標, 訪問量大的網站尤是如此. 為什么呢? 分開管理不是更加靈活嗎?
大家都這么做當然有它的優點, 但這同樣存在缺點.

優點:

1. 1 + 1 < 2
圖標放在一起, 可以令圖標的總容量稍小一點. 這不是最重要的, 但我可以告訴你, 很多程序員都是完美主義者.

2. 讓連接次數大量減少
用過 Opera 的朋友可能會對它那個顯示圖片下載的進度條印象很深, 它會顯示 “已下載圖片/圖片總數”. 對于 Web 服務器上的每個獨立資源, 都需要去連接和獲取的. 所以大家都設法將很多圖標放在一個圖片上, 連接一次就全部取回來. 這也許是一圖多標的主要目的.

3. 讓瀏覽器將圖標預先下載
瀏覽器為了盡快地顯示頁面, 一般只是將打開頁面時用到的圖片下載到本地, 而一些可能用到, 但沒有立刻被用到的圖片需要在應用的時候再進行下載. 最經典的例子可能是導航菜單的 Tab 圖標, 如果普通狀態的 Tab 圖標和鼠標懸停時的圖標都是獨立放置的, 那么當你鼠標移動到 Tab 按鈕時, 圖標才開始下載, 這樣會帶給用戶很不好的視覺效果. 所以我覺得遇到這種情況時, 將多個圖標合并在一起的處理是必須的.

缺點:

1. 圖片難以管理, 難以定位
如果你要更換一個圖標, 那么你需要編輯整個大圖片. 如果你要改變一個圖標的大小, 很可能你需要重新計算它的位置, 甚至無從下手, 只能在別的位置再添加一個圖標.

2. 2 > 1
兩個圖標合成的圖片是肯定比其中一個圖標獨占的圖片大的, 也就是說, 下載這個圖片所需的時間將比單獨一個圖標用的時間長. 瀏覽器顯示圖片一般都是下載完則顯示或者邊下載邊顯示的, 如果你那幾個圖標組成的圖片容量比較大, 那么它們不能逐個顯示予用戶, 會造成很不好的用戶體驗.

應用:

1. 讓圖標盡量排列得有規律
有規律地排放的圖標跟容易定位和維護, 這里的間隔可以使用 16, 32, 48, 96 等標準尺寸.

2. 將背景顏色一致的圖標放置在一起
如果背景顏色不一樣, 最好分為兩個或多個圖片放置, 特別是背景顏色相近的, 很容易混淆.

3. 將相同欄目的圖標放置在一起
這樣可以少寫一些 CSS 代碼. 設置一個 background, 再在每個項設置 background-position 就行了.

4. 不要將大圖綁在一塊
大部分用戶都不會耐心地等待頁面的所以文件被下載完畢再進行閱讀, “不耐煩” 會驅使他們去點 close.

拓展:

萬物都是相通的, 軟件和互聯網技術也一樣. 如果圖片作為網絡資源需要每個進行連接來獲取, 那么 .js 文件和 .css 文件也是如此. 我們應該將可能放在一起的資源綁起來. 這樣可以為你省下一些資源, 也可以滿足你追求完美的虛榮.

但切忌過度. 并不是所有東西都可以綁一塊的, 沒有人會將洗衣粉和餅干纏在一起的. 將有相關性的, 或者特別零碎的放在一起都是可以的, 我相信聰明的你一定會有自己的一套分類方法.