CSS中背景圖片的定位

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

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


3. 百分比, 例如: background-position: 80% 50%;
優點: 可以使用數學來控制定位, 並且比像素定位更加靈活.
缺點: IE 中無法處理複雜的百分比定位.
原理, 如圖. 與像素定位不同, 它的百分比位置是指容器和圖片內部的相應位置作為顯示的位置.


SOSO在製作網頁時, 為什麼要將多個表徵圖放在一個圖片檔案裡面呢?
經常在網上搜羅資源的朋友可能會發現, 很多網站喜歡將小表徵圖拼在一個圖片檔案裡. 然後在 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 檔案也是如此. 我們應該將可能放在一起的資源綁起來. 這樣可以為你省下一些資源, 也可以滿足你追求完美的虛榮.
但切忌過度. 並不是所有東西都可以綁一塊的, 沒有人會將洗衣粉和餅乾纏在一起的. 將有相關性的, 或者特別零碎的放在一起都是可以的, 我相信聰明的你一定會有自己的一套分類方法.