前言
background-size：規定背景圖片的尺寸。為CSS3屬性。so...萬惡的ie瀏覽器，此刻的內心一定是崩潰的！說實話，作為一個前端的coder，面對CSS3如此多的炫酷效果，我不能用起來，還要求我兼容ie8及以下，我一定放棄維護多年的淑女形象，拿起刀！！！干什么，你懂的！當然，我大天朝的XX網站以及領導的審美除外！畢竟，我還是一朵需要祖國的陽光沐浴而茁長成長的老花朵！言歸正傳，聊一聊今天的主題。

background-size

CSS3屬性。用法主要有下面4種。

• length
  設置背景圖像的高度和寬度。
  第一個值設置寬度，第二個值設置高度。
  如果只設置一個值，則第二個值會被設置為 "auto"。
• percentage
  以父元素的百分比來設置背景圖像的寬度和高度。
  第一個值設置寬度，第二個值設置高度。
  如果只設置一個值，則第二個值會被設置為 "auto"。
• cover
  把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
  背景圖像的某些部分也許無法顯示在背景定位區域中。
• contain
  把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。

CSS Sprite

CSS Sprites又作css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，減少單張圖片資源請求次數，以優化渲染性能。

本媛在coder的過程中有極強的完美主義傾向以及近乎苛刻的強迫癥。見不得代碼資源零碎和松散。所以，喜歡把一些描述性的圖片資源進行整合。當然雪碧圖就為首選。制作雪碧圖的方法有很多。早年間最喜歡用ps。現在嘛，出現了很多優秀的制作工具。所以，打著時間是用來干更有意義的事的旗號一本正經的偷起了懶。所以，關于怎么制作一張雪碧圖，在這里就不贅述。隨便一家搜索引擎隨便一搜都是一大票的解決方案。

• CSS Sprite 應用
  雪碧圖其實就是把網頁中一些圖標以及零散的描述性圖片整合到一張圖片文件中，利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
  如，有一張如下的雪碧圖：

  
  
  
  

  對應的CSS代碼為：

i.pic{
  background: url('../../../static/dragComponentSprite.png') -15px -63px no-repeat;
  background-size: cover; 
}
i.form{
  background: url('../../../static/dragComponentSprite.png') -64px -63px no-repeat;
  background-size: cover; 
}
i.btn{
  background: url('../../../static/dragComponentSprite.png') -159px -63px no-repeat;
  background-size: cover; 
}
i.map{
  background: url('../../../static/dragComponentSprite.png') -111px -63px no-repeat;
  background-size: cover; 
}

那么問題來了......
一般在雪碧圖中的單個小圖都是一定大小的，與在網頁應用中的目標大小并不一致。比如在雪碧圖中單個圖標的大小是50 * 50，而目標大小是35 * 35，這個時候按照單圖來設置background-size:cover實際并不能如你所愿正確定位。

這是為什么呢？而這時候又該如何解決呢？難道如此美妙的雪碧圖和酷炫的CSS3不能兼得？！O My God Orz.......這簡直太絕望了有木有？

也許你會說，放棄雪碧圖，依然用小圖就可以啦。當然可以。但遇到困難就逃避不是本媛的性格！so，這種情況下，就跳出以往單圖設置的框框。之所以出現這種狀況應該是因為雪碧圖和目標圖的大小比例出現了問題。所以試想將雪碧圖按照一定的比例進行變化，然后在去利用background-position設置定位是不是就可以解決了呢？那事實證明，這是可行的。

具體怎么做呢？
你可能忘了，CSS3中的background-size的作用。它生來就是用來設置背景圖片的大小的。所以，我們依然用它來解決上面雪碧圖應用中出現的問題。但是具體background-size要設置多大才合適呢。在這本媛就要傳授一個小訣竅給你啦。

敲黑板，劃重點啦！請牢牢記住下面萬能的公式！！！

background-size 的寬度值 = (雪碧圖總寬度 * 目標圖像寬度) /雪碧圖中高分辨率圖像寬度

比如，我們上面的問題。
我制作的雪碧圖中的圖標是高分辨率下的50px * 50px；
網頁中需要展示的目標圖標是35px * 35px；
制作的雪碧圖的總寬度是300px；
根據上面的公式 background-size 的寬度值 = (300 * 35)/50 = 210;
或許你已經注意到了，這里我只計算了背景圖像的寬度值，并沒有設置高度，這里就涉及到了background-size在響應式等比例縮放圖片的應用了。這里暫不展開，下次可以單開一篇章好好聊聊。所以，為了確保背景圖像縮放比例正常，我們將“height”值設置為“auto”。到這里。問題已經得到了完美解決。

最終的CSS代碼為：

i.pic{
  background: url('../../../static/dragComponentSprite.png') -15px -63px no-repeat;
  background-size: 210px auto; 
}
i.form{
  background: url('../../../static/dragComponentSprite.png') -64px -63px no-repeat;
  background-size: 210px auto; 
}
i.btn{
  background: url('../../../static/dragComponentSprite.png') -159px -63px no-repeat;
  background-size: 210px auto; 
}
i.map{
  background: url('../../../static/dragComponentSprite.png') -111px -63px no-repeat;
  background-size: 210px auto; 
}