什麼是CSS Sprites？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【 什麼是CSS Sprites？】

1.背景介紹
CSS Sprites簡介     

       加速的關鍵，不是下降質量，而是減小個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。因此，圖片越多請求次數越多，形成延遲的可能性也就越大。

2.知識剖析
CSS Sprites原理

       CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字精確的定位出背景圖片的位置。

1.利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；

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

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

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

3.常見問題
誠然CSS Sprites是如此的強大，可是也存在一些不可忽視的缺點，以下：

1.在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；

2.CSS Sprites在開發的時候比較麻煩，你要經過photoshop或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣；幸虧騰訊的鬼哥用ADOBE AIR開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，可是已經比photoshop測量來的方便多了，並且樣式直接生成，複製，拷貝就OK！

3.CSS Sprites在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動css。

4.CSS Sprites很是值得學習和應用，特別是頁面有一堆icon（圖標）。總之不少時候你們要權衡一下利弊，再決定是否是應用CSS Sprites。

4.解決方案
CSS Sprites的使用

有幾篇關於CSS Sprites的文章，基本上把其原理和機制說明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中關於CSS Sprites的內容3.2. CSS Sprites

5.編碼實戰
CSS Sprite的例子

.bg_sprite{background-image:url(/整圖地址); background-repeat:no-repeat}

引用該類 .. 而後在元素中逐必定義背景座標 .. 如下爲關鍵屬性 ..

ico1 {width:容器寬度;height:容器高度;background-position:X座標 Y座標}

ico2 {width:容器寬度;height:容器高度;background-position:X座標 Y座標}

ico3 {width:容器寬度;height:容器高度;background-position:X座標 Y座標}

.nav {width:容器寬度;height:容器高度;background-position:X座標 Y座標}

必需要限定容器大小符合背景圖元素位置 .. 另外 .. XY軸是相對於整張圖片的左上角來算的 .. 因此取值必定要算清楚。

CSS Sprites的問題

因爲IE6存在的background的flicker問題IE6/Win, background image on , cache=‘check every visit’: flicker!，有人針對此問題提出瞭解決方案Fast Rollovers Without Preload

關於IE6的flicker問題，fivesevensix上有一篇很不錯的研究文章Minimize Flickering CSS Background Images in IE6

另外：brunildo的CSS tests and experiments是關於css各類功能不錯的參考手冊和測試工具。

CSS Sprites 樣式生成工具是有騰訊的鬼哥使用RIA開發一個針對CSS Sprites 的樣式生成工具，小巧，實用，惋惜部分功能使用起來還不是很靈活，但願鬼哥繼續升級。

CSS Sprites在開發的時候比較麻煩，你要經過photoshop或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣，還要書寫出css；實用這個工具就能在很大程度改善這個問題；

目前最新版本是V1.5，已經有了放大鏡功能。很少少了，仍是剛快試試吧，

6.擴展思考
如何實現雪碧圖自適應

雪碧圖自適應主要利用background-size屬性，該屬性容許咱們使用百分比。那麼在雪碧圖都是規則的正方形下，咱們能夠採起下面的排布方式：

 

這樣排布的話，當咱們設置background-size屬性爲200%時，就能夠只顯示該大正方形的四分之一的內容，配合background-position屬性的百分比設置完成雪碧圖的自適應。

7.參考文獻
1.Creating Rollover Effects with CSS Sprites

2.Building a Dynamic Banner with CSS Sprites

3.High Performance Web Sites中關於CSS Sprites的內容3.2. CSS Sprites

感謝你們觀看！
今天的分享就到這裏啦，歡迎你們點贊、轉發、留言、拍磚~
PPT地址：https://ptteng.github.io/PPT/... 

視頻地址：https://pan.baidu.com/s/1c1Yp140

視頻密碼：c98q