這篇文章主要介紹“CSS Sprites怎么用”，在日常操作中，相信很多人在CSS Sprites怎么用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS Sprites怎么用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都服務(wù)器托管，創(chuàng)新互聯(lián)提供包括服務(wù)器租用、成都服務(wù)器托管、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、申請(qǐng)域名等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：13518219792

為什么要使用Sprites（精靈圖）？

網(wǎng)頁(yè)通常包含多個(gè)圖像。這些包括圖標(biāo)，按鈕，徽標(biāo)，相關(guān)圖片和其他圖形。當(dāng)頁(yè)面中加載圖像時(shí)，瀏覽器向服務(wù)器發(fā)出HTTP請(qǐng)求。分別加載每個(gè)圖像需要多次調(diào)用HTTP服務(wù)器，這可能導(dǎo)致下載時(shí)間變慢以及帶寬使用率過(guò)高。

CSSSprites會(huì)將多個(gè)圖像組合成一個(gè)稱為精靈表或拼貼圖的單個(gè)圖像，用戶不下載多個(gè)文件，而是下載單個(gè)文件并通過(guò)偏移文件顯示必要的圖像（或精靈圖）。

這樣可以減少對(duì)服務(wù)器的調(diào)用、減少呈現(xiàn)網(wǎng)頁(yè)所需的下載次數(shù)，節(jié)省帶寬并縮短用戶端的下載時(shí)間，減少網(wǎng)絡(luò)擁塞。

如何使用CSSSprites（精靈圖）？

因?yàn)镃SSSprites是一張多個(gè)圖像組合成單個(gè)圖像，在精靈表中多個(gè)圖像會(huì)被放置在網(wǎng)格狀圖案里，呈現(xiàn)網(wǎng)狀分布。

當(dāng)需要特定圖像（精靈圖）時(shí)，一般會(huì)通過(guò)CSSbackground-images屬性引用精靈表，在通過(guò)CSSbackground-position屬性對(duì)其進(jìn)行偏移定位得到所需的精靈圖，然后以像素為單位定義精靈圖的大小。

使用Sprites（精靈圖）的實(shí)例

精靈圖表：

代碼示例：

html代碼：

<ulclass="menu">

<liclass="firefox"><ahref="#">Firefox</a></li>

<liclass="chrome"><ahref="#">Chrome</a></li>

<liclass="ie"><ahref="#">Explorer</a></li>

<liclass="opera"><ahref="#">Opera</a></li>

<liclass="safari"><ahref="#">Safari</a></li>

</ul>

css代碼：

ul.menu{

list-style-type:none;

width:400px;

}

ul.menuli{

padding:20px5px;

font-size:16px;

float:left;

font-family:"TrebuchetMS",Arial,sans-serif;

}

ul.menulia{

height:50px;

line-height:50px;

display:inline-block;

padding-left:60px;/*Tosifttextoffthebackground-image*/

color:#3E789F;

background:url(Sprites.png)no-repeat;/*Asalllinksharethesamebackground-image*/

}

ul.menuli.firefoxa{

background-position:00;

}

ul.menuli.chromea{

background-position:0-100px;

}

ul.menuli.iea{

background-position:0-200px;

}

ul.menuli.safaria{

background-position:0-300px;

}

ul.menuli.operaa{

background-position:0-400px;

}

ul.menuli.firefoxa:hover{

background-position:0-50px;

}

ul.menuli.chromea:hover{

background-position:0-150px;

}

ul.menuli.iea:hover{

background-position:0-250px;

}

ul.menuli.safaria:hover{

background-position:0-350px;

}

ul.menuli.operaa:hover{

background-position:0-450px;

}

到此，關(guān)于“CSS Sprites怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

本文名稱：CSSSprites怎么用
文章源于：http://aaarwkj.com/article44/igihhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、域名注冊(cè)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站營(yíng)銷、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)