前言
做開發的小伙伴可能經常遇到雪碧圖，那么究竟什么是雪碧圖呢？
簡介
官方解釋：
CSS雪碧圖即CSS Sprite（精靈），在國內很多人叫css精靈，是一種網頁圖片應用處理方式，它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了，對于當前網路流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題
簡單理解：
所謂的雪碧圖是一種CSS影像合并技術，該方法是將小圖示和背景影像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分;簡單說就是在一整張圖片中分割出自己想要的部分，也可理解為圖片截取顯示（坐標的移動)
由來
加速的關鍵，不是降低質量，而是減少個數，傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算，客戶端每顯示一張圖片都會向服務器發送請求，所以，圖片越多請求次數越多，造成延遲的可能性也就越大
原理
簡單理解：原理就是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量，該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽
優點
①減少加載網頁圖片時對服務器的請求次數；
可以合并多數背景圖片和小圖示，方便在任何位置使用，這樣不同位置的請求只需要呼叫一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量，
②提高頁面的加載速度
sprite技術的其中一個好處是圖片的加載時間(在有許多sprite時，單張圖片的加載時間)，由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小于所有圖片拼合前的大小，單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小，因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小，
缺點
①在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高解析度的螢屏下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
②CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的位元組就增加了，還要改動css
注意
為什么使用雪碧圖時background-position屬性值為負數？
上面的例子已經闡述了如何使用雪碧圖，只不過初學者可能會對雪碧圖中的background-position屬性值為負值有所疑惑，這個問題其實不難回答，如果細心的人應該很早就發現了使用負數的根源所在，這邊用上面的Demo為例，來分析這個問題，上面的span標簽是一個25px長寬的容器，在使用背景圖時，背景圖的初始位置會從容器的左上角的開始鋪滿整個容器，然而容器的大小限制了背景圖呈現的大小，超出容器部分被隱藏起來，假如設定background-position: 0 0 那么意味著，背景圖相對于容器（span標簽）x軸=0；y軸=0的位置作為背景圖的起始位置來顯示圖片，所以如果需要在容器中顯示第二個圖示，意味著雪碧圖x軸方向要左移動，左移動雪碧圖即它的值會設定為負數，同理y軸方向也一樣，
總結
CSS Sprites非常值得學習和應用，特別是頁面有一堆icon（圖示），總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/103879.html
標籤：其他
上一篇：1_ZedBoard開發板測驗