雪碧圖的使用

版權聲明：本文爲網上轉載。

在網站開發中，咱們常常會使用一些背景圖片來點綴效果，如一些形象生動的小圖標。這種背景圖片一多，網絡請求就多了。這樣爲了減小網絡請求，咱們把一些小的背景圖合併在一個大的圖中，而後經過 CSS 的背景定位技術去使用。咱們把這種技術叫作 CSS Sprite，也叫雪碧圖，還叫 CSS 精靈。

如在騰訊課堂的網頁中，打開調試工具，咱們不難發現其也使用到 CSS Sprite 的技術。

雪碧圖的應用原理

經過上面講述，咱們知道雪碧圖是一張大的合併圖，每一個小圖標其實只是截取大圖的一部分來顯示。以下圖所示，咱們有一張帶有各類表情圖標的雪碧圖，其中每一個表情圖標都佔領着相應的位置。

假如咱們須要顯示開心表情的這一個圖標，咱們須要計算開心圖標在合併圖中相應的位置和其圖標的大小。以雪碧圖的左上角爲座標中心，咱們得出開心表情恰好在座標的原點，即 X 軸0像素，Y 軸0像素的位置，且咱們能夠得出圖標的寬高均爲96像素。

所以咱們設置這個圖標元素的背景圖片爲這張雪碧圖，背景位置爲圖標在雪碧圖中的座標，這樣開心的圖標就顯示出來了。

.happy { display:inline-block; width: 96px; height: 96px; background-image: url(sprite.png); /* 設置背景圖片 */ background-repeat: no-repeat; /* 設置爲不平鋪 */ background-position: 0 0; /* 設置圖標位置 */ } 

假如咱們還要使用到哭泣的表情。同理所得，計算出哭泣的圖標的位置在雪碧圖的 X 軸向右192像素， Y 軸向下96像素。

所以爲了顯示哭泣表情，咱們能夠這樣寫。

.cry { display:inline-block; width: 96px; height: 96px; background-image: url(sprite.png); /* 設置背景圖片 */ background-repeat: no-repeat; /* 設置爲不平鋪 */ background-position: -192px -96px; /* 設置圖標位置 */ } 

上面的例子已經闡述瞭如何使用雪碧圖，不過初學者可能會對哭表情 background-position 爲負值有所疑惑。爲了說明這個問題，咱們先看下平常生活中的放大鏡：

平時咱們使用放大鏡通常拿着放大鏡移動以查看對應的放大效果，下面的東西不動。如今假設若是咱們放大鏡不動，移動下面的東西是否是也能夠查看對應的放大效果呢？

若是把咱們要顯示圖標的區域（元素大小）當作是放大鏡，它是不動的，而背景圖片就是要放大的東西，爲了要顯示對應的圖標就得移動了。前面咱們已經說了 background-position 的座標系：向右爲 X 軸正值，向下爲 Y 軸正值。

如今咱們要使用哭的表情，其實就是把它從（192px, 96px）移到（0, 0）那個位置（元素的位置，至關於放大鏡的默認位置），這樣就要向左移動192px，向上移動96px。根據向右、向下爲正，那麼向左、向上移動天然就是負了。

最後咱們整理下，發現能夠把共同的部分抽出來定義一個 class，這樣咱們就不用去定義每個表情的背景圖片了，以下所示：

.sprite { display:inline-block; width: 96px; height: 96px; background: url(sprite.png) no-repeat; /* 設置背景 */ } .happy { background-position: 0 0; /* 設置圖標位置 */ } .cry { background-position: -192px -96px; /* 設置圖標位置 */ } 

上面實例在線demo：CSS Sprite。

製做雪碧圖

製做雪碧圖的方式有許多，大概有以下幾種方法：

• 使用 photoshop 等圖片編輯工具

  對於簡單的雪碧圖，咱們能夠經過 photoshop 等圖片編輯工具來手動合併圖標到一張大圖中。

• 在線工具

  目前有許多在線合成雪碧圖的站點，只須要將圖片上傳上去，即可以根據設置，生成想要的雪碧圖以及對應的 CSS 樣式文件，如 spritegen、css sprites generator。

  甚至咱們合好的圖片，也能夠經過 spritecow 來幫咱們完成對應的 CSS 定位。

• 構建工具

  除了上面兩種，咱們還能夠經過如webpack, fis3, gulp等構建工具來完成雪碧圖生成工做。具體可參考下面連接（JS 部分咱們會具體講解構建工具）：

  • webpack 自動雪碧圖生成
  • fis3 CssSprite圖片合併

雪碧圖與字體圖標優劣

前面咱們已經說了可使用 iconfont 來搞圖標，如今咱們又介紹了雪碧圖，那麼這兩種辦法對一些圖標的處理都有什麼優劣呢？

總得來講，使用字 iconfont 或者雪碧圖都存在着相應的優勢和缺點。所以咱們須要結合各自的優劣，來綜合考慮使用哪一種方案。

雪碧圖的優點

• 圖標更美觀

  因爲 iconfont 的圖標只能設置單色，而雪碧圖的圖標因爲是圖片，因此能展示出更爲美觀的圖標效果。

• 製做成本更低

  iconfont 的製做較爲麻煩，須要設計師按照規範，一一製做圖標的 svg 文件。而雪碧圖的製做只需合併圖片便可，在製做成本上更低。

雪碧圖的劣勢

• 高清屏下會失真（第三章會介紹）

  在 2x 的設備像素比的屏幕上，若是要達到和文字同樣的清晰度，圖片的寬度須要實際顯示大小的兩倍，不然看起來會比較模糊。

• 雪碧圖不方便變化

  雪碧圖本質上是一張靜態的圖片，所以沒法靈活地經過樣式去動態改變圖片圖標的顏色和其餘效果。