聊聊css sprite技術(雪碧圖)

css sprite技術，又稱「css雪碧圖」、「css精靈」。

2017-05-19

---

 

剛接觸sprite技術的時候，估計你們都同樣，眼裏冒星星，直呼好用好用，是吧😄！並且好處也挺多的，背景圖一次加載，減小了請求；對於命名困難症的同窗說，圖片命名也省去了很多麻煩啦！

先通俗地講下sprite是怎麼一回事：是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景（background-image）定位（background-position）來顯示須要顯示的圖片部分。

eg：

1 HTML:
2 <div class="sprite"></div>

style:
.sprite {
      width:;
      height:;
      background: url('') no-repeat;
      background-position: x y;
}
.sprite:hover {
      background-position : a b;
}

HTML文檔中寫入一個div，樣式中經過background／background－image設置背景圖片，background-position根據所要用的圖標定一個位置[x,y]；在hover中，在設置一個變化後的圖標位置[a,b]，（注：位置中 x,y的值就是數學座標軸中的橫縱座標）。位置的x,y,a,b的值以背景圖片的左頂點爲（0，0）原點算。

技術，你學不學，它都在那裏，變幻無窮！

推薦：gulp-sprite工具、響應式下的雪碧圖解決方案、SVG Sprite技術。