css sprite雪碧圖製做，使用以及相關，圖文gif。

寫在前面：

在網頁製做中，雪碧圖也是前端攻城獅必須掌握的一項小技能。百度詞條對雪碧圖的解釋是：CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。本文主要內容包括雪碧圖如何製做，雪碧圖優缺點，哪些場景須要使用雪碧圖。

實現原理：

CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減小你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標籤變得更加複雜了，圖片是在CSS中定義，而非img標籤。

1.前期準備下載工具：css sprit（css精靈）

長這樣：

css sprit

看圖片就知道多好用！

文件不到200k，至關輕便，這是百度雲連接：pan.baidu.com/s/1nuOZDqT

也有mac版本的，這是連接：dl.pconline.com.cn/download/42…

2.使用方法

下載，打開以後。
1.首先要切一些圖片，不會切的話，移步：《前端ps切圖方法，圖文詳細》

2.打開雪碧圖，選擇圖片。

3.添加完圖片以後，會自動生成代碼，須要排列一下圖片：

能夠看到我排列圖片的時候，下面的代碼也會跟着刷新

能夠看到排列圖片的時候，下面的代碼也會跟着刷新

注意：排列圖片的時候要注意各個圖片之間留點空隙，否則使用的時候，會相互覆蓋。

3.保存圖片以及雪碧圖css代碼

保存雪碧圖

生成的雪碧圖：

保存雪碧圖-css代碼（由於軟件沒有到導出css代碼的功能，因此要本身新建一個txt文件，放在雪碧圖旁邊，之後打開txt就知道圖片在雪碧圖的位置。）

gif操做：

如何在html中使用？

慕課網雪碧圖：

慕課網demo： www.imooc.com/code/1511。
慕課網雪碧圖教程： www.imooc.com/learn/93

3.雪碧圖優劣勢

1.加快網頁加載速度

網頁上面每一張圖片，都要向瀏覽器請求下載圖片，而瀏覽器接受的同時請求數是10個，一次能處理的請求數目是兩個。

http發起請求，最耗時的是在三次握手，每次請求以前都要握手。因此在網頁性能優化中，減小http請求的次數是至關重要的一點！（原本想寫多一點，但有些知識點不太清楚，怕誤人子弟就再也不贅述了。）

當一個網頁有幾百張，幾千張圖片的時候加載起來簡直了！並且對於不穩定的網絡帶寬，加載起來更是噩夢，因此把圖片拼接爲一張大圖，從而加快加載速度，以及加速頁面渲染

2.後期維護簡單

該工具能夠直接經過選擇圖片進行圖片的拼接，固然你也能夠本身挪動裏面的圖片，本身去佈局你的雪碧圖，更換圖片的時候也只要更改一下圖片的位置就能夠了。直接生成代碼，簡單易用

三、CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

四、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。

五、更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。

關於雪碧圖的缺點內容：不要濫用雪碧圖sprite

裏面說了蠻多的，這事情能夠根據使用場景來決定，你們能夠看看，畢竟我是來教雪碧圖的。。。
下面有關於雪碧圖的demo。

以前寫過兩篇相關的：
1.前端ps切圖方法，圖文詳細
2.ps切圖實用小技巧、圖片格式的區別及相關內容

以上，2017.4.10。

最後又到了觀衆朋友們最喜歡的求贊求關注環節：但願看完的朋友點個喜歡，也能夠關注一下我，如今這階段基本上每月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支持，感激涕零！
ps：目前待業，座標北京，求推薦工做。而後但願我寫哪方面的文章能夠在底下評論，或者是私信我，雖然寫的很差，但我就當這是記錄本身成長的一種方式咯。（前提是我會了，若是不會我也會記下來，等會了的時候再更出來。）
**掘金我的主頁 ，簡書主頁連接，csdn博客主頁連接 ，github 。