css中的sprite怎么用

css sprite怎么用，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

css sprite直譯過來就是CSS精靈。通常被解釋為“CSS圖像拼合”或“CSS貼圖定位”。

一、什么是css sprites

css sprites直譯過來就是CSS精靈。通常被解釋為“CSS圖像拼合”或“CSS貼圖定位”。其實(shí)就是通過將多個(gè)圖片融合到一張圖里面，然后通過CSS background背景定位技術(shù)技巧布局網(wǎng)頁背景。這樣做的好處也是顯而易見的，因?yàn)閳D片多的話，會(huì)增加http的請求，無疑促使了網(wǎng)站性能的減低，特別是圖片特別多的網(wǎng)站，如果能用csssprites降低圖片數(shù)量，帶來的將是速度的提升。

css sprites是什么通俗解釋：CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合拼合成一張圖片中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片在布局盒子對象位置。

二、適合與不適合CSS sprites拼合布局

1、適合：一般小圖標(biāo)素材

小的圖標(biāo)ico類素材，一般圖標(biāo)很小十多像素幾十像素的寬度高度，這種適合拼合成一張圖實(shí)現(xiàn)sprites background背景定位布局。多小ico太多自然加載網(wǎng)頁時(shí)瞬間會(huì)消耗些http iis鏈接數(shù)，但很快加載完又會(huì)釋放。

2、不適合：大圖大背景

大背景一般用于網(wǎng)頁背景，拼合時(shí)，設(shè)置為網(wǎng)頁背景時(shí)所有背景都會(huì)顯示出來。大圖拼接拼合會(huì)增大圖片大小，網(wǎng)絡(luò)帶寬不好的訪問者訪問時(shí)由于背景圖大文件大會(huì)加載稍慢些，所以大圖不推薦拼接拼合來使用css sprites背景定位布局。

3、sprites適合推薦小結(jié)

一般此sprites拼合布局用于局部小盒子布局不適合大背景大布局背景使用。比如小局部布局小圖標(biāo)背景、小導(dǎo)航背景等CSS布局。

三、css sprites優(yōu)勢與缺點(diǎn)劣勢判斷選擇

1、sprites優(yōu)勢：

若干小圖標(biāo)拼合成一張圖后布局，減少http iis請求數(shù)，對于大戰(zhàn)大流量網(wǎng)站來說隱形優(yōu)勢很顯然的，從而隱形地提升了網(wǎng)站性能。對于大流量網(wǎng)站來說本來http請求數(shù)比較寶貴，使用CSS Sprites這樣可以大大的提高了頁面的性能，這是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因，同時(shí)也減少圖片文件數(shù)目。

2、sprites缺點(diǎn)

在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好只夠的空間，防止板塊內(nèi)不會(huì)出現(xiàn)不必要的背景，如果留空間或拼合位置不合適，在布局時(shí)容易出現(xiàn)布局這個(gè)盒子對象時(shí)，設(shè)置背景出現(xiàn)拼合相鄰圖片，干擾圖片的情況;

CSS Sprites在開發(fā)的時(shí)候比較麻煩，你要通過photoshop(PS)或其他工具測量計(jì)算每一個(gè)背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣;

CSS Sprites在維護(hù)的時(shí)候比較麻煩，sprites是一般雙刃劍，如果頁面背景有少許改動(dòng)，一般就要改這張合并的圖片，無需改的地方最好不要?jiǎng)?，這樣避免改動(dòng)更多的css，如果在原來的地方放不下，有只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，因?yàn)槊看蔚膱D片改動(dòng)都得往這個(gè)圖片刪除或添加內(nèi)容，顯得稍微繁瑣，而且重新算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情

由于圖片的位置需要固定為某個(gè)絕對數(shù)值，這就失去了諸如center之類的靈活性。

3、推薦小結(jié)

由于拼接圖片需要一定經(jīng)驗(yàn)技巧（做實(shí)踐即可快速掌握）、測量定位數(shù)值、修改不是那么靈活等原因，一般小網(wǎng)站站、小流量網(wǎng)站、一般企業(yè)網(wǎng)站不是很推薦使用CSS Sprites，因?yàn)槭褂肅SS Sprites會(huì)比普通單個(gè)背景圖片布局要耗費(fèi)時(shí)間和精力，所以不是很推薦小站。但這個(gè)布局技巧也必須要學(xué)會(huì)掌握靈活布局才是目的。小站HTTP請求數(shù)豐富這點(diǎn)拼接其實(shí)也起不來什么優(yōu)勢反而會(huì)浪費(fèi)寶貴時(shí)間。相反大網(wǎng)站大流量網(wǎng)站推薦使用，這樣比較值得。

四、css sprites實(shí)例示例教程

1、素材與要實(shí)現(xiàn)效果截圖

2、sprites實(shí)例教程解釋介紹

首先這些圖標(biāo)素材是放在同一張圖片上（PS拼合），然后實(shí)現(xiàn)成列表類布局，列表每個(gè)前圖標(biāo)不同。使用css sprites實(shí)現(xiàn)此布局（其實(shí)使用background樣式實(shí)現(xiàn)）。

首先此列表布局我們使用ul li列表布局，每個(gè)li站一行排版，對ul設(shè)置padding實(shí)現(xiàn)四周內(nèi)容與邊框一定間距效果，因?yàn)槊總€(gè)li前面圖標(biāo)不同，但此背景圖片是拼合在一張圖片上，所以這里做li里開始使用span標(biāo)簽實(shí)現(xiàn)這個(gè)不同圖標(biāo)效果，每個(gè)圖標(biāo)不同為了區(qū)別span所以對span設(shè)置不同class，不同class對應(yīng)設(shè)置定位相應(yīng)的圖標(biāo)。

3、實(shí)例教程準(zhǔn)備

1）、初始化模板使用：為了兼容各大瀏覽器，仍然這里使用網(wǎng)站提供初始化模板，在此模板基礎(chǔ)上修改設(shè)置符合本實(shí)例CSS樣式。
2）、圖標(biāo)素材，這里直接為大家提供拼接好的圖標(biāo)素材圖片一張，命名為“ico.png”，如下圖，可直接另存為保存使用。

4、先布局出效果，再css sprites設(shè)置不同背景圖標(biāo)樣式

html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <ul class="Sprites">     
       <li><span class="a1"></span><a href="#">WORD文章標(biāo)題</a></li>     
       <li><span class="a2"></span><a href="#">PPT內(nèi)容標(biāo)題</a></li>     
       <li><span class="a3"></span><a href="#">Excel內(nèi)容標(biāo)題</a></li>     
       <li><span class="a4"></span><a href="#">PDF內(nèi)容標(biāo)題</a></li>     
       <li><span class="a5"></span><a href="#">文本文檔標(biāo)題</a></li>     
   </ul>

為了區(qū)別不同效果對span加入不同class。

css代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. 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}

效果截圖

css sprites關(guān)鍵代碼與解釋

首先對ul.Sprites li span引入背景

ul.Sprites li span{ background:url(ico.png) no-repeat} 給span設(shè)置css背景圖片。

再分別對不同span class設(shè)置對于圖標(biāo)背景定位具體值

ul.Sprites li span.a1{ background-position: -62px -32px}設(shè)置背景圖片作為對應(yīng)盒子對象背景后向左“拖動(dòng)”62px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

ul.Sprites li span.a2{ background-position: -86px -32px}設(shè)置背景圖片作為對應(yīng)盒子對象背景后向左“拖動(dòng)”86px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

ul.Sprites li span.a3{ background-position: -110px -32px}設(shè)置背景圖片作為對應(yīng)盒子對象背景后向左“拖動(dòng)”110px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

ul.Sprites li span.a4{ background-position: -133px -32px}設(shè)置背景圖片作為對應(yīng)盒子對象背景后向左“拖動(dòng)”133px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

ul.Sprites li span.a5{ background-position: -158px -32px}設(shè)置背景圖片作為對應(yīng)盒子對象背景后向左“拖動(dòng)”158px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

關(guān)鍵：背景background-position有兩個(gè)數(shù)值，前一個(gè)代表靠左距離值（可為正可為負(fù)），第二個(gè)數(shù)值代表靠上距離值（可為正可為負(fù)）

背景background-position有兩個(gè)數(shù)值可以為正可以為負(fù)，當(dāng)為正數(shù)時(shí)，代表背景圖片作為對象盒子背景圖片時(shí)靠左和考上多少距離多少開始顯示背景圖片；當(dāng)為負(fù)數(shù)時(shí)代表背景圖片作為盒子對象背景圖片，將背景圖片拖動(dòng)超出盒子對象左邊多遠(yuǎn)，拖動(dòng)超出盒子對象上邊多遠(yuǎn)開始顯示此背景圖片。

CSS sprites技巧技術(shù)總結(jié)

CSS sprites其實(shí)就是對CSS背景background樣式的擴(kuò)展應(yīng)用，以前設(shè)置背景background-position常見為正數(shù)值，設(shè)置背景靠左靠上距離多少像素開始顯示圖片，為負(fù)數(shù)值后，是將圖片拖離左邊上邊多少像素開始顯示圖片，下載本案例多次修改修改數(shù)值，觀察觀察能找到規(guī)律很快就會(huì)作為此技巧，同時(shí)學(xué)會(huì)PS切片工具獲取距離值。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。