Css Sprite 圖片等比縮放圖片大小（background-size優化Sprites圖顯示）

在一個項目的開發過程當中用到了css Sprite，有這樣一個需求：目標樣式大小是32px * 23px大小的圖片做爲圖標。 如圖所示:

可是，給個人背景圖片是這樣的一張圖，256px * 46px：

在咱們的實例中,咱們使用底部菜單大小32px * 23px.爲了保證普通顯屏設備的圖像顯示，在這個圖像的基礎上作了一半的縮小。

在最初的CSS樣式中，background-position的屬性值都不須要進行任何設置，由於他們的默認值都是「0」，以下所示：

.x-navbar [class^='x-icon-'] {
background-image: url(img/icon_navbar_new_year.png);
width: 32px;
height: 23px;
}

所以，最關鍵的問題是，咱們怎麼知道background-size屬性值要設置爲多少？

這裏有一個公式：
高分辨率圖像寬度 / 目標圖像寬度 = X
原始Sprites圖像寬度 / x = background-size的寬度值

咱們高分辨率下的圖標是256px x 46px;
咱們目標圖像的寬度是「64px」；
咱們Sprites圖像的總寬度是「256px」

根據前面的公式 能夠得知
64/32 = 2
256/2 = 128
最後的一件事情。咱們只計算了背景圖像的寬度值，爲了確保背景圖像縮放比例正常，咱們將「height」值設置爲「auto」。固然你也能夠設置相的的值（設置background-sizer的寬度爲auto，高度爲具體值），但我發現設置寬度會比較容易。

.x-navbar [class^='x-icon-'] {
    background-size: 128px auto;
}

而後就是根據圖片的位置座標進行顯示了：

.x-icon-shouye {background-position: 0 0;}
.x-icon-dingdan {background-position: -32px 0;}
.x-icon-gouwuche {background-position: -64px 0;}
.x-icon-gengduo {background-position: -96px 0;}

這樣就實現了圖中的效果了！