CSSSprites(CSS精靈)

　　一般css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位。

二.使用CSS Sprites的優缺點

優點：

1.很好地減少網頁的http請求，從而大大的提高頁面的性能。

2.減少圖片的字節，多張圖片合并成1張圖片的字節總是小于多張圖片的字節總和。

3.解決了在圖片命名上的困擾。

缺點：

1.在圖片合并的時候，要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；

2.在寬屏，高分辨率的屏幕下的自適應頁面，如果圖片不夠寬，很容易出現背景斷裂；

3..CSS Sprites在開發時，要測量計算每一個背景單元的精確位置，建議使用CSS Sprites 樣式生成工具。

4.CSS Sprites在維護時，如果頁面背景有少許改動，一般就要改這張合并的圖片。

總結：一般CSS Sprites拼合布局用于局部小盒子布局不適合大背景大布局背景使用。比如小局部布局小圖標背景、小導航背景等CSS布局。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。

三.舉個栗子

一張Emoji的圖片

最終效果：

html代碼：

css代碼：

*{
 margin: 0px;
 }
 ul,li{
 list-style: none;
 }
 li{
 width:50px;
 height:50px;
 overflow: hidden;
 background: url('Emoji.jpg') -0px -0px no-repeat;
 }
 .Emoji1{
 background-position: -0px -0px;
 }
 .Emoji2{
 background-position: -0px -50px;
 }
 .Emoji3{
 background-position: -0px -100px;
 }
 .Emoji4{
 background-position: -0px -150px;
 }

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com