css sprites拼合

1、什麼是css sprites

css sprites直譯過來就是CSS精靈。一般被解釋爲「CSS圖像拼合」或「CSS貼圖定位」。就是把網頁中一些背景圖片整合拼合成一張圖片中，再利用DIV CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片在佈局盒子對象位置。

2、適合與不適合DIV CSS sprites拼合佈局

一、適合：通常小圖標素材
小的圖標ico類素材，通常圖標很小十多像素幾十像素的寬度高度，這種適合拼合成一張圖實現sprites background背景定位佈局。多小ico太多天然加載網頁時瞬間會消耗些http iis連接數，但很快加載完又會釋放。

二、不適合：大圖大背景
大背景通常用於網頁背景，拼合時，設置爲網頁背景時全部背景都會顯示出來。大圖拼接拼合會增大圖片大小，網絡帶寬很差的訪問者訪問時因爲背景圖大文件大會加載稍慢些，因此大圖不推薦拼接拼合來使用css sprites背景定位佈局。

三、sprites適合推薦小結
通常此sprites拼合佈局用於局部小盒子佈局不適合大背景大布局背景使用。好比小局部佈局小圖標背景、小導航背景等DIVCSS佈局。

3、div css sprites優點與缺點劣勢判斷選擇

一、sprites優點：
若干小圖標拼合成一張圖後佈局，減小http iis請求數，對於大戰大流量網站來講隱形優點很顯然的，從而隱形地提高了網站性能。對於大流量網站來講原本http請求數比較寶貴，使用DIV+CSS Sprites這樣能夠大大的提升了頁面的性能，這是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由，同時也減小圖片文件數目。

二、sprites缺點
在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好只夠的空間，防止板塊內不會出現沒必要要的背景，若是留空間或拼合位置不合適，在佈局時容易出現佈局這個盒子對象時，設置背景出現拼合相鄰圖片，干擾圖片的狀況;

CSS Sprites在開發的時候比較麻煩，你要經過photoshop(PS)或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣;

CSS Sprites在維護的時候比較麻煩，sprites是通常雙刃劍，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，有隻能（最好）往下加圖片，這樣圖片的字節就增長了，由於每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣，並且從新算圖片的位置（尤爲是這種上千px的圖）也是一件頗爲不爽的事情

因爲圖片的位置須要固定爲某個絕對數值，這就失去了諸如center之類的靈活性。

三、DIVCSS5推薦小結
因爲拼接圖片須要必定經驗技巧（作實踐便可快速掌握）、測量定位數值、修改不是那麼靈活等緣由，通常小網站站、小流量網站、通常企業網站不是很推薦使用CSS Sprites，由於使用CSS Sprites會比普通單個背景圖片佈局要耗費時間和精力，因此不是很推薦小站。但這個佈局技巧也必需要學會掌握靈活佈局纔是目的。小站HTTP請求數豐富這點拼接其實也起不來什麼優點反而會浪費寶貴時間。相反大網站大流量網站推薦使用，這樣比較值得。

4、div css sprites實例示例教程

一、素材與要實現效果截圖

拼合ico圖標素材實現列表不一樣圖標效果截圖

二、sprites實例教程解釋介紹
首先這些圖標素材是放在同一張圖片上（PS拼合），而後實現成列表類佈局，列表每一個前圖標不一樣。使用div css sprites實現此佈局（其實使用background樣式實現）。

首先此列表佈局咱們使用ul li列表佈局，每一個li站一行排版，對ul設置padding實現四周內容與邊框必定間距效果，由於每一個li前面圖標不一樣，但此背景圖片是拼合在一張圖片上，因此這裏作li裏開始使用span標籤實現這個不一樣圖標效果，每一個圖標不一樣爲了區別span因此對span設置不一樣class，不一樣class對應設置定位相應的圖標。

三、實例教程準備
1）、初始化模板使用：爲了兼容各大瀏覽器，仍然這裏使用DIVCSS5提供初始化模板，在此模板基礎上修改設置符合本實例CSS樣式。
2）、圖標素材，這裏直接爲你們提供拼接好的圖標素材圖片一張，命名爲「ico.png」，以下圖，可直接另存爲保存使用。

sprites案例圖片素材（直接點擊圖片鼠標右鍵能夠另存爲保存使用）

四、先佈局出效果，再css sprites設置不一樣背景圖標樣式
1)、關鍵html代碼：

<ul class="Sprites">
    <li><span class="a1"></span><a href="#">WORD文章標題</a></li>
    <li><span class="a2"></span><a href="#">PPT內容標題</a></li>
    <li><span class="a3"></span><a href="#">Excel內容標題</a></li>
    <li><span class="a4"></span><a href="#">PDF內容標題</a></li>
    <li><span class="a5"></span><a href="#">文本文檔標題</a></li>
</ul>

爲了區別不一樣效果對span加入不一樣class。

2）、關鍵CSS代碼

ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}
ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}
ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;
overflow:hidden;background:url(ico.png) no-repeat}
ul.Sprites li a{ padding-left:5px}

3）、效果截圖

未使用sprites技術引入背景圖片效果截圖

4）、使用css sprites設置定位背景完整關鍵CSS代碼

ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}
ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}
ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;
overflow:hidden;background:url(ico.png) no-repeat}
ul.Sprites li a{ padding-left:5px}
ul.Sprites li span.a1{ background-position: -62px -32px}
ul.Sprites li span.a2{ background-position: -86px -32px}
ul.Sprites li span.a3{ background-position: -110px -32px}
ul.Sprites li span.a4{ background-position: -133px -32px}
ul.Sprites li span.a5{ background-position: -158px -32px}

最終實現瀏覽器效果測試效果圖

5）、css sprites關鍵代碼與解釋

ul.Sprites li span.a1{ background-position: -62px -32px}
ul.Sprites li span.a2{ background-position: -86px -32px}
ul.Sprites li span.a3{ background-position: -110px -32px}
ul.Sprites li span.a4{ background-position: -133px -32px}
ul.Sprites li span.a5{ background-position: -158px -32px}

首先對ul.Sprites li span引入背景
ul.Sprites li span{ background:url(ico.png) no-repeat} 給span設置css背景圖片。
再分別對不一樣span class設置對於圖標背景定位具體值
ul.Sprites li span.a1{ background-position: -62px -32px}設置背景圖片做爲對應盒子對象背景後向左「拖動」62px，向上「拖動」32px開始顯示此背景圖標
ul.Sprites li span.a2{ background-position: -86px -32px}設置背景圖片做爲對應盒子對象背景後向左「拖動」86px，向上「拖動」32px開始顯示此背景圖標
ul.Sprites li span.a3{ background-position: -110px -32px}設置背景圖片做爲對應盒子對象背景後向左「拖動」110px，向上「拖動」32px開始顯示此背景圖標
ul.Sprites li span.a4{ background-position: -133px -32px}設置背景圖片做爲對應盒子對象背景後向左「拖動」133px，向上「拖動」32px開始顯示此背景圖標
ul.Sprites li span.a5{ background-position: -158px -32px}設置背景圖片做爲對應盒子對象背景後向左「拖動」158px，向上「拖動」32px開始顯示此背景圖標

關鍵：背景background-position有兩個數值，前一個表明靠左距離值（可爲正可爲負），第二個數值表明靠上距離值（可爲正可爲負）
背景background-position有兩個數值能夠爲正能夠爲負，當爲正數時，表明背景圖片做爲對象盒子背景圖片時靠左和考上多少距離多少開始顯示背景圖片；當爲負數時表明背景圖片做爲盒子對象背景圖片，將背景圖片拖動超出盒子對象左邊多遠，拖動超出盒子對象上邊多遠開始顯示此背景圖片。

6）、背景圖片定位數值獲取
向左「拖動」，向上「拖動」這些這PS獲取圖文教程

利用切片工具獲取對應小圖標在圖片文件中位置

經過ps軟件利用切片工具畫出要顯示圖片區域後，雙擊便可彈出「切片詳細卡」，能夠獲得X（靠左距離值），Y（靠上距離值）便可得到對應圖片素材在大圖中位置。

5、DIV CSS sprites技巧技術總結

CSS sprites其實就是對CSS背景background樣式的擴展應用，之前設置背景background-position常見爲正數值，設置背景靠左靠上距離多少像素開始顯示圖片，爲負數值後，是將圖片拖離左邊上邊多少像素開始顯示圖片，下載本案例屢次修改修改數值，觀察觀察能找到規律很快就會做爲此技巧，同時學會PS切片工具獲取距離值。

文章出處和來源網址：http://www.divcss5.com/rumen/r767.shtml