【CSS 精靈圖（sprite）】相關知識總結
【CSS 精靈圖（sprite）】有這篇文章學習精靈圖技術就夠了
目錄：
1、什麼是精靈圖？
CSS精靈圖（sprite）直譯為 “CSS精靈”，通常被稱為 “CSS影象拼合”、“CSS貼圖定位” 或 “CSS圖片精靈”、“CSS雪碧圖”……等。
簡單來說，就是把一個頁面涉及到的所右零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅幅地慢慢顯示出來了。
2、為什麼需要精靈圖？
一個網頁中往往會應用很多的背景影象作為修飾，當網頁中的影象數量過多時，伺服器就會頻繁的接收和傳送請求，這樣就會造成伺服器請求壓力過大，而大大降低網頁的載入速度。
因此，為了有效的減少伺服器接收請求的次數，提高網頁的載入速度，出現了CSS精靈技術，也稱 CSS Sprites或CSS 雪碧。除此之外，精靈圖技術的出現還有以下好處。
- 可以減少對伺服器的呼叫、減少呈現網頁所需的下載次數，節省頻寬並縮短使用者端的下載時間，減少網路擁塞。
- 可以很好地減少網頁的http請求，從而大大的提高頁面的效能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
- CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。
- 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。
- 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
3、多倍圖
物理畫素？
物理畫素:即裝置畫素，而物理畫素點是螢幕顯示的最顆粒，在同一裝置上，它的物理畫素和物理畫素點是固定的。這是廠商在出廠時就設定好的，即一個裝置的解析度時固定的。比如iphone6的物理畫素是750px * 1334px。
邏輯畫素？
**邏輯畫素:**即css畫素，是視口中的一個小方格，所以css樣式程式碼中使用的是邏輯畫素。假如在一個裝置中，物理畫素和邏輯畫素相同，將不會產生任何問題。但是在iphone4中，物理畫素是640px * 960px，而邏輯畫素為320px * 480px，因此需要使用大約4個物理畫素來顯示一個css畫素(邏輯畫素)。因為iphone的螢幕是Retina螢幕，也就是說將4個物理畫素點（寬2個，高兩個，合計4個）壓縮到一個css畫素中，來達到高清的效果。
Retina (視網膜螢幕)？
所謂“Retina”是一種顯示技術，可以將更多的畫素點壓縮至一塊螢幕裡，從而達到更高的解析度並提高螢幕顯示的細膩程度。由蘋果公司發明。最初該技術是用於蘋果的iPhone4上。其螢幕解析度為960×640（每英寸畫素數326ppi）。這種解析度在正常觀看距離下足以使人肉眼無法分辨其中的單獨畫素。也被稱為視網膜顯示屏。
對於一張 50px * 50px 的圖片,在手機或 Retina 屏中開啟，按照剛才的物理畫素比會放大倍數，這樣會造成圖片模糊。
物理畫素比？
物理畫素比是指：物理畫素與邏輯畫素之間的比例。當畫素比為1:1時，使用一個物理畫素顯示一個邏輯畫素，當畫素比為2:1時，使用4個物理畫素顯示一個邏輯畫素。
那麼我們如何知道裝置的物理畫素比呢？總不能自己在那算吧，不用著急，js已經在window物件中為我們封裝好了一個屬性：var a = window.devicePixelRatio;，我們可以通過這個屬性來獲取裝置的物理畫素比。
倍圖的作用？
在實際開發中，我們大多數情況下會使用到2倍圖和3倍圖來操作background-size屬性，來解決精靈圖（雪碧圖）或背景圖片模糊的問題。
在實際開發中，我們從UI小姐姐那拿到的設計圖通常都是640px或750px的設計圖，所以為了解決裝置中背景圖模糊的問題，我們可以把更多的畫素點壓縮至一塊螢幕，或者說壓縮到一個邏輯畫素(css畫素)內，從而達到更高的解析度並提高螢幕顯示的細膩程度。
總結
裝置物理畫素比：window.devicePixelRatio即畫素的壓縮比例。在移動端為了讓圖片在高清手機上顯示的更加細膩，通常會使用更大的圖片，比如二倍圖或者三倍圖，那麼我們就可以使用物理畫素比來解決背景圖模糊的問題。
4、背景縮放
介紹：background-size 屬性指定背景圖片的大小
語法：background-size: length | percentage | cover | contain;
**單位：**px(畫素) 或 %(百分比)
**注意：**如果想要圖片在盒子內全部覆蓋顯示，則使用100%即可
| 值 | 描述 |
|---|---|
| length | 設定背景圖片高度和寬度。第一個值設定寬度，第二個值設定的高度。如果只給出一個值，第二個是設定為 auto(自動) |
| percentage | 將計算相對於背景定位區域的百分比。第一個值設定寬度，第二個值設定的高度。如果只給出一個值，第二個是設定為"auto(自動)" |
| cover | 此時會保持影象的縱橫比並將影象縮放成將完全覆蓋背景定位區域的最小大小。 |
| contain | 此時會保持影象的縱橫比並將影象縮放成將適合背景定位區域的最大大小。 |
5、如何使用精靈圖
- 使用
background-img屬性載入精靈圖 - 使用
background-repeat屬性設定圖片禁止平鋪 - 使用
background-position屬性設定圖片的座標位置，精靈圖一般使用的時負值，因為精靈圖一般都是將圖片往左和往下移動，所以使用負值。 - 使用
background-size屬性設定背景圖的大小，如果是精靈圖則將width設定為元素的width，因為裝精靈圖的盒子一般是正方形，高不用寫則是auto。 - 這裡牽扯到倍圖的知識點，因為我們拿到的精靈圖可能是多倍圖，一般為二倍或三倍。我們可以根據圖片的寬和盒子的寬得到這個倍數，並且將背景圖縮小對應的倍數。然後再進行測量，給
background-position對應的座標。
6、“攜程”案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二倍圖精靈圖</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul li {
margin-left: 10px;
list-style: none;
width: 40px;
height: 40px;
float: left;
background: pink;
background: url(./topnav.png) no-repeat;
background-size: 40px;
}
ul li:nth-child(2) {
background: url(./topnav.png) no-repeat 0px -40px;
background-size: 40px;
}
ul li:nth-child(3) {
background: url(./topnav.png) no-repeat 0px -80px;
background-size: 40px;
}
ul li:nth-child(4) {
background: url(./topnav.png) no-repeat 0px -120px;
background-size: 40px;
}
ul li:nth-child(5) {
background: url(./topnav.png) no-repeat 0px -160px;
background-size: 40px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>