CSS Sprites的原理（圖片整合技術）(CSS精靈)/雪碧圖

CSS Sprites的原理（圖片整合技術）(CSS精靈)/雪碧圖

 

1、將導航背景圖片，按鈕背景圖片等有規則的合併成一張背景圖，即將多張圖片合爲一張整圖，而後用background-position」來實現背景圖片的定位技術。

2、圖片整合的優點：

1）經過圖片整合來減小對服務器的請求次數，從而提升 頁面的加載速度。

2）經過整合圖片來減少圖片的體積。

 

二、CSS Sprites的實現方法

三、圖片整合原則

1）邊切圖邊整合。

2）定位時避免使用bottom,right等，用具體的數值，爲了不當你的寬度或高度上擴展sprites圖時出現位置的錯誤。

3）將小圖標預留足夠的空間，由於使用這些圖標元素一般會有大量的內容並且可能須要擴展的間距，以致於其它的圖片可能會意外出如今本區域內。通常的狀況下，會將這些小圖標整合到文件的最右側。

4）單張整合好的sprite圖片在100KB之內。

5）按分類整合圖片。

6）爲了方便計算尺寸，通常狀況會將sprites圖的座標計算成整數倍。

快捷工具：   Github地址 https://github.com/iwangx/sprite

（1）滑動門技術

1.什麼是滑動門

滑動門是一個形象的稱呼，它利用CSS背景圖像可層疊性，並容許彼此之上進行滑動來創造一些特殊動態效果

 

2.滑動門特徵：

經過滑動門技術，可使CSS設計出來的導航菜單兼具傳統佈局的圖像效果，與CSS佈局的高效擴展性 。

案例地址：http://download.csdn.net/download/flqbestboy/9925828