關鍵字, 例如: background-position: top right; 優點: 直觀, 可用性高, 各瀏覽器中表現一致. 缺點: 缺少間隔尺寸. 三個垂直的 (top, center, bottom) 和三個水平的 (left, center, right) 只能為你組合出最多 9 個位置. 不存在其他混式的組合. 並且很難像其他兩種數值定位方法一樣使用算數進行控制 畫素, 例如: background-position: 0px 0px; 優點: 概念容易被理解, 只要知道如何測量容器左上角和圖片左上角之間的距離, 就能準確地推測出圖片顯示的位置. 畫素還能夠精確的用數學來控制定位. 缺點: 你必須知道確實的值. 原理, 如圖. 其實就是圖片左上角相對於容器左上角的座標關係. 百分比, 例如: background-position: 80% 50%; 優點: 可以使用數學來控制定位, 並且比畫素定位更加靈活. 缺點: IE 中無法處理複雜的百分比定位. 原理, 如圖. 與畫素定位不同, 它的百分比位置是指容器和圖片內部的相應位置作為顯示的位置.
關鍵字, 例如: background-position: top right; 優點: 直觀, 可用性高, 各瀏覽器中表現一致. 缺點: 缺少間隔尺寸. 三個垂直的 (top, center, bottom) 和三個水平的 (left, center, right) 只能為你組合出最多 9 個位置. 不存在其他混式的組合. 並且很難像其他兩種數值定位方法一樣使用算數進行控制 畫素, 例如: background-position: 0px 0px; 優點: 概念容易被理解, 只要知道如何測量容器左上角和圖片左上角之間的距離, 就能準確地推測出圖片顯示的位置. 畫素還能夠精確的用數學來控制定位. 缺點: 你必須知道確實的值. 原理, 如圖. 其實就是圖片左上角相對於容器左上角的座標關係. 百分比, 例如: background-position: 80% 50%; 優點: 可以使用數學來控制定位, 並且比畫素定位更加靈活. 缺點: IE 中無法處理複雜的百分比定位. 原理, 如圖. 與畫素定位不同, 它的百分比位置是指容器和圖片內部的相應位置作為顯示的位置.