Css 精靈圖（雪碧圖） 圖片大小顯示

Web 項目使用的JQuery框架，項目時間比較久了，圖片積累下來，大概光圖片就有一兩百個，爲了減少網絡請求數量和加載時間，項目做一個統一的規整，將小圖標全部放在精靈圖（雪碧圖）上。

兩百多個小圖標，對於UI設計師來說，應該也滿多大，後來就在網上找了一個工具，可以把小圖標整合在一個雪碧圖圖上。工具鏈接爲：https://www.toptal.com/developers/css/sprite-generator

合成雪碧圖之後 ，最重要 的工作來了，將項目中的引入jpg或者png 的地方，換成雪碧圖的方式來進行修改。

在網上找了半天，也看了別的vue項目，但是不行。

vue項目中可以使用工具postcss 進行css的處理，最終的代碼如下：

@define-mixin sprite $viw, $vih, $riw, $rih, $rix, $riy, $rpw: 452, $rph: 547 {
    width: bpcalc($viw);
    height: bpcalc($vih);
    background-image: url(../../../static/assets/csss.png);
    background-repeat: no-repeat;
    background-size: bpcalc(($viw * $rpw)/ $riw) bpcalc(($vih * $rph)/ $rih);
    background-position: -bpcalc(($viw * $rix) / $riw) -bpcalc(($vih * $riy)/$rih);

}，

對應的在JQuery 中，我沒有找的可以使用這種工具。

只能苦逼逼的自己想辦法處理了。

一開始不是特別理解意思，想着background-size對應的是圖片在頁面上的大小，結果完全不對，全部否認之前的認識，一切重新開始。

我專門寫了一個對應的函數來處理處結果。函數如下：

/*
 * $viw 頁面上顯示的寬度
 * $vih 頁面上顯示的高度
 * $riw 雪碧圖上圖標的寬度
 * $rih 雪碧圖上圖標的高度
 * $rix 雪碧圖上圖標的x軸座標
 * $riy 雪碧圖上圖標的y軸座標
 * $rpw 圖片總寬度
 * $rph 圖片總高度
* */
function sprite($viw, $vih, $riw, $rih, $rix, $riy, $rpw, $rph){
    var w = $viw / $riw;
    var h = $vih / $rih;
    var bg_widsize = (w  * $rpw / 75).toFixed(2);
    var bg_heisize = (h * $rph / 75).toFixed(2);
    var bg_widposi = (w * $rix / 75).toFixed(2);
    var bg_heiposi = (h * $riy / 75).toFixed(2);
    Utils.Console.log('background-size:'+bg_widsize + 'rem ' + bg_heisize + 'rem;' + 'background-position:-' + bg_widposi + 'rem -' + bg_heiposi + 'rem;');
    return 'background-size:'+bg_widsize + 'rem ' + bg_heisize + 'rem;' + 'background-position:' + bg_widposi + 'rem ' + bg_heiposi + 'rem;';
}

對應的參數上面註釋就有。

每一個對應的$rpw / 75類似，是將px轉換成rem,不同的項目轉換的不一樣，也可以不轉換，返回的結果用px接受。

舉一個例子（單位爲:px），假如一個圖標iconA，在設計圖上實際顯示的大小是20*30，在雪碧圖上大小實際是40*60，雪碧圖的整體大小爲1000*1000，實現原理是，先將雪碧圖縮小，縮小倍數是寬：20/40，高30/60，對應的background-size的值時表示雪碧圖整體的大小，background-position的值表示這個圖標 在雪碧圖上的座標。