css 小經驗： css中背景圖片定位

　　在css使用圖片背景時，很多時候為了節省網頁載入時間，把多張小圖片合并在一張大圖片中，這時候使用圖片就要用到圖片定位，在網上找了些講解：

 

1. 關鍵字, 例如: background-position: top right;

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

 

 

 

2. 像素, 例如: background-position: 0px 0px;

 

優點: 概念容易被理解, 只要知道如何測量容器左上方和圖片左上方之間的距離, 就能準確地推測出圖片顯示的位置. 像素還能夠精確的用數學來控制定位.
缺點: 你必須知道確實的值.

 

原理, . 其實就是圖片左上方相對於容器左上方的座標關係.

 　　　　　　　　　　　　　　　　　　　　　　　　

 

 

3. 百分比, 例如: background-position: 80% 50%;

 

優點: 可以使用數學來控制定位, 並且比像素定位更加靈活.
缺點: IE 中無法處理複雜的百分比定位. 你可以看看這個測試.

 

原理, . 與像素定位不同, 它的百分比位置是指容器和圖片內部的相應位置作為顯示的位置.