CSS 背景圖片的定位和縮放

在 CSS 中，利用 background-image 屬性我們可以指定元素的背景圖片，例如：

.example {
  background-image: url(image/some.png);
  background-repeat: repeat;
}

其中，PNG 是常見的背景圖片格式；較新的瀏覽器，比如 Chrome 8+，Firefox 4+，IE 9+，Opera 9.5+ 和 Safari 5+，也支持使用 SVG 格式的背景圖片。當背景圖片大小超過元素的大小時，我們可以用 background-repeat 屬性指明重復覆蓋的方式。

通常，一個網站中會使用許多個小圖片。為減少網絡請求的數目，我們經常將多個小圖片拼合為一個大圖片，然后用 CSS Sprite 的方法，截取其中的某個圖片。假設我們將 5 個寬為 24px 的小圖片，從左到右合並為一個寬為 120px 的大圖片。此時，我們可以用下面的方法，分別截取出第 2 個和第 3 個小圖片作為背景：

.image2 {
  background-image: url(some.png);
  background-repeat: no-repeat;
  background-position: -24px 0px;
}
.image3 {
  background-image: url(some.png);
  background-repeat: no-repeat;
  background-position: -48px 0px;
}

其中，background-position 屬性指明了背景圖片的左上角位置相對於元素區域的左上角的偏移值。

這個 background-position 屬性也可以使用比例值，此時表示背景圖片的該比例位置和元素區域的該比例位置重合。因此，取值為 0% 0% 表示背景圖片的左上角和元素區域的左上角重合，而取值為 50% 50% 表示背景圖片的中心和元素區域的中心重合。上面的例子也可以改為比例值如下：

.image2 {
  background-image: url(some.png);
  background-repeat: no-repeat;
  background-position: 25% 0%;
}
.image3 {
  background-image: url(some.png);
  background-repeat: no-repeat;
  background-position: 50% 0%;
}

經過簡單計算可知，如果一行有 n 個等寬的圖片，則截取第 k 個時要用的比例值為 (k-1)/(n-1)。不過使用比例值有時也不太可靠，例如在 Opera 12.15 中測試時發現，使用長度值時截取正常，而使用比例值時截取有些錯位。

有時候，我們也會需要從大圖片中先縮小到一定大小，再截取部分圖片。這時候可以用 CSS3 的 background-size 屬性。例如，我們用 SVG 圖形作為背景圖片，其中該 SVG 圖形中包含 5 排 3 列共 15 個 96x96 像素的小圖形，總共大小為 480x288 像素。而我們需要截取第 2 個和第 3 個並縮放到 24x24 像素大小作為背景圖片。此時的 CSS 代碼如下：

.image2 {
  width: 24px; height: 24px;
  background-image: url(some.svg);
  background-repeat: no-repeat;
  background-size: 120px 72px;
  background-position: -24px 0px;
}
.image3 {
  width: 24px; height: 24px;
  background-image: url(some.svg);
  background-repeat: no-repeat;
  background-size: 500% 300%;
  background-position: -48px 0px;
}

其中，我們先用 background-size 屬性將 some.svg 縮小到 120x72 像素，再用 background-position 屬性截取小圖片。這個 background-size 屬性既可以用長度值也可以用比例值，用比例值時將根據元素的大小計算背景圖片的縮放大小。Chrome 3+，Firefox 4+，IE 9+，Opera 10+ 和 Safari 4.1+ 都支持這個屬性。

參考資料：
[1] MDN - background-image - CSS
[2] MDN - background-repeat - CSS
[3] MDN - background-position - CSS
[4] MDN - background-size - CSS
[5] W3C - CSS2 - Colors and Backgrounds
[6] W3C - CSS Backgrounds and Borders Module Level 3
[7] CSS: Using Percentages in Background-Image - SitePoint
[8] svg-icon-loader - load SVG images from one single file
[9] SVG CSS Injection—A Different Approach Towards SVG Rendering