這篇“CSS Sprites有什么優(yōu)缺點(diǎn)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS Sprites有什么優(yōu)缺點(diǎn)”文章吧。

創(chuàng)新互聯(lián)公司長(zhǎng)期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為卓資企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都做網(wǎng)站，卓資網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

CSS Sprites介紹

Css sprites 可翻譯為css精靈，也有人翻譯為css雪碧，因?yàn)閟prite也有雪碧的意思。在國(guó)內(nèi)習(xí)慣成他為圖片整合技術(shù)，說起來這個(gè)稱呼也是滿貼切的，因?yàn)樗_實(shí)是多張圖片整合為一整圖片的技術(shù)，為什么要把多張圖整合到一張上呢，這樣做有什么好處呢？因?yàn)檫@樣的話，當(dāng)您訪問該頁面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。

CSS Sprites原理

Css sprites是將多張零散的背景圖片整合到一張背景圖上，然后通過background-position來調(diào)整背景的位置，這個(gè)時(shí)候你必須確保使用該張精靈圖的容器要比背景圖片小才是OK的，不然很容易漏出其他的背景圖片，所以尤其要控制好盒子的大小；其次，你還需要注意書寫背景定位的時(shí)候極大多數(shù)都是負(fù)的，水平為負(fù)數(shù)，圖片才會(huì)往左側(cè)平移，所以才會(huì)顯示出你需要的那部分背景圖，垂直方向也是同理。當(dāng)多個(gè)盒子引用一張背景圖時(shí)，只需要改變背景定位就可以改變頁面中的顯示部分為哪一部分背景圖，這樣做的目的就是為了降低瀏覽器向服務(wù)器的請(qǐng)求次數(shù)，這樣一來可以大大提高網(wǎng)頁的加載速度。

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

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

1、利用CSS Sprites能夠減少瀏覽器向服務(wù)器的請(qǐng)求次數(shù)，減少http請(qǐng)求，從而提高頁面的性能，這是圖片精靈的最顯著特點(diǎn)，也是被廣泛應(yīng)用的主要原因。

2、利用圖片精靈還能減少圖片的字節(jié)，你使用9張小的圖片，一張4KB，9張就是36KB，而把他們都放一張圖片上，只需要4KB到5KB就可，所以減少圖片字節(jié)也是顯而易見的。

3、在整理圖片的過程中，不需要再糾結(jié)如此大量圖片的名字問題，多張放在一張上，只需要取一個(gè)綜合的名字就可以了，如此便提高了工作效率。

4、如果想改變網(wǎng)站風(fēng)格，你只需要處理一張圖片就可以了，把一張圖片的顏色和風(fēng)格一改，那么整個(gè)網(wǎng)站的風(fēng)格就都變了，便于后期的維護(hù)和修改。

CSS Sprites 的缺點(diǎn)：

1、在應(yīng)用精靈圖片的時(shí)候，你需要考慮當(dāng)前盒子會(huì)不會(huì)漏出其他的背景圖，這個(gè)還好，比較頭疼的是，頁面自適應(yīng)時(shí)，背景圖的位置就沒那么容易掌控了。

2、制作精靈圖的過程比較繁瑣，你需要處理好每張圖之間的距離和位置，如果做得不合理，那么使用起來就比較麻煩了，甚至需要單獨(dú)創(chuàng)建一個(gè)空的盒子來裝背景圖。

3、使用精靈圖的頁面后期維護(hù)帶來了繁瑣，因?yàn)樗嵌鄰垐D在一張圖上，牽一發(fā)而動(dòng)全身的感覺，你改變一張背景圖，如果大小發(fā)生變化，那么其他的你就得動(dòng)，只要你動(dòng)了，那么所有的背景定位都將需要改變，所以一旦需要更改背景圖的話，輕易不要改變其他圖片的位置，原位能放下就在原位改，放不下就在下面添加。

以上就是關(guān)于“CSS Sprites有什么優(yōu)缺點(diǎn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：CSSSprites有什么優(yōu)缺點(diǎn)
分享鏈接：http://vcdvsql.cn/article42/gjdchc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、Google、服務(wù)器托管、搜索引擎優(yōu)化

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)