標籤：get 關閉 請求 總結 one 瀏覽器 線上 彩妝 如何
1. 什麼是CSS Sprite
將一些碎小的圖片拼接為一張大點的圖片來使用，目的是為了減少瀏覽器的http請求次數以提高網頁的載入速度。
每次請求圖片都需要跟伺服器建立一次串連，並且瀏覽器的最大並發請求數是有限制的。使用雪碧圖並不能減少傳送的資料的總量，但可以通過節省掉一部分建立、關閉串連的時間來加快網頁的載入速度。
※ 直接手動拼接，只要可以將需要用到的小圖片拼在一張圖片上即可，當然，拼接應該盡量遵循的原則：
盡量讓這張圖片以後可維護；
在保證可維護性的前提下，盡量少的在圖片上留大面積空白；
※ 使用產生工具，比如cssgaga等，參見http://www.99css.com/cssgaga/
2.2 怎麼使用雪碧圖？拿到雪碧圖之後，如果是使用手動拼接方式的話，就使用ps等工具量一下具體的座標，如果是使用產生工具自動產生的話，產生結果中應該會帶上之前每張小圖片的座標的。
使用雪碧圖的套路就是先使用background-image:url(“foo.png”)來設定元素的背景圖片，然後使用background-position:x-shift y-shift;來滑動圖片。
一個簡單的使用雪碧圖的例子：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS Sprite Demo</title> <style type="text/css"> /*側欄容器div*/ .nav-bar{ width:250px; } /*側欄列表樣式*/ .nav-list li{ list-style:none; padding:10px; border:1px solid #DDD; } /*sprite表徵圖的樣式*/ .nav-list li i{ background-image:url("imgs/sidebar.png"); display:inline-block; width:30px; height:24px; float:left; } /*鞋包配飾*/ .nav-list li:nth-child(2) i{ background-position:0px -24px; } /*運動戶外*/ .nav-list li:nth-child(3) i{ background-position:0px -48px; } /*珠寶手錶*/ .nav-list li:nth-child(4) i{ background-position:0px -72px; } /*手機數位*/ .nav-list li:nth-child(5) i{ background-position:0px -96px; } /*家電辦公*/ .nav-list li:nth-child(6) i{ background-position:0px -120px; } /*護膚彩妝*/ .nav-list li:nth-child(7) i{ background-position:0px -144px; } /*母嬰用品*/ .nav-list li:nth-child(8) i{ background-position:0px -168px; } </style> </head> <body> <div class="nav-bar"> <ul class="nav-list"> <li><i></i>服裝內衣</li> <li><i></i>鞋包配飾</li> <li><i></i>運動戶外</li> <li><i></i>珠寶手錶</li> <li><i></i>手機數位</li> <li><i></i>家電辦公</li> <li><i></i>護膚彩妝</li> <li><i></i>母嬰用品</li> </ul> </div> </body></html>
：
雪碧圖：
3.總結
3.1 雪碧圖的原理？
以左上方的頂點作為定位的原點。
x位移為負值的話就向右移動。
y位移為負值的話就向下移動。
原圖並不會被裁切，它還是那麼大，就在那兒，只是超出的部分隱藏掉了，相當於是滑動圖片。
3.2 涉及到的屬性
background-image:url("imgs/sidebar.png");
background-position : x-shift y-shift;
background-position-x : x-shift;
background-position-y : y-shift;
3.3 什麼時候適合使用雪碧圖？
圖是靜態，不隨著使用者資訊的變化而變化。
小圖片，容量比較小，主要是為了減少http請求次數。
相關產生雪碧圖工具：
CssGaga
http://www.99css.com/cssgaga/
線上產生雪碧圖：
http://alloyteam.github.io/gopng/
http://csssprites.com/
參考資料：
1. 慕課網視頻教程 http://www.imooc.com/learn/93
2. StackOverFlow的解釋： http://stackoverflow.com/questions/3889661/whats-this-negative-value-in-this-css-property
CSS Sprite筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
