本篇內(nèi)容介紹了“CSS中Sprites的簡(jiǎn)單介紹”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括北川羌族網(wǎng)站建設(shè)、北川羌族網(wǎng)站制作、北川羌族網(wǎng)頁(yè)制作以及北川羌族網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，北川羌族網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到北川羌族省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

HTML代碼

代碼如下:

   
   
   

       
• CSS Sprite

       
• CSS Sprite

       
• CSS Sprite

       
• CSS Sprite

       
• CSS Sprite

       

   

CSS代碼

代碼如下:

JS代碼

代碼如下:

IMG(右鍵保存即可,重命名all.png)

效果圖

CSS Sprites優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

1.利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能，這也是CSS Sprites較大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；
2.CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
3.解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁(yè)的制作效率。
4.更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起來(lái)更加方便。

缺點(diǎn)

誠(chéng)然CSS Sprites是如此的強(qiáng)大，但是也存在一些不可忽視的缺點(diǎn)，如下：
1.在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁(yè)面，你的圖片如果不夠?qū)?，很容易出現(xiàn)背景斷裂；
2.CSS Sprites在開發(fā)的時(shí)候比較麻煩，你要通過photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用ADOBE AIR開發(fā)了一個(gè)CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經(jīng)比photoshop測(cè)量來(lái)的方便多了，而且樣式直接生成，復(fù)制，拷貝就OK！
3.CSS Sprites在維護(hù)的時(shí)候比較麻煩，如果頁(yè)面背景有少許改動(dòng)，一般就要改這張合并的圖片，無(wú)需改的地方好不要?jiǎng)?，這樣避免改動(dòng)更多的css，如果在原來(lái)的地方放不下，又只能（好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動(dòng)css。
4.CSS Sprites非常值得學(xué)習(xí)和應(yīng)用，特別是頁(yè)面有一堆ico（圖標(biāo)）。總之很多時(shí)候大家要權(quán)衡一下利弊，再?zèng)Q定是不是應(yīng)用CSS Sprites。

“CSS中Sprites的簡(jiǎn)單介紹”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

當(dāng)前文章：CSS中Sprites的簡(jiǎn)單介紹-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/dcsjpc.html