創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、青龍網(wǎng)站維護(hù)、網(wǎng)站推廣。

今天就跟大家聊聊有關(guān)CSS sprite，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

CSSSprites在國(guó)內(nèi)很多人叫css精靈，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。它允許你將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。對(duì)于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無需顧忌這個(gè)問題。

加速的關(guān)鍵，不是降低重量，而是減少個(gè)數(shù)。傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小無所謂，計(jì)算機(jī)統(tǒng)一都按byte計(jì)算?？蛻舳嗣匡@示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求。所以，圖片越多請(qǐng)求次數(shù)越多，造成延遲的可能性也就越大。

原理：

CSS Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

1、CSSSprites在國(guó)內(nèi)很多人叫css精靈，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。它允許你將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。下面我給出了一個(gè)概念圖，你可以參考一下。說到底還就是通過某些手段把許多小圖片給塞入一張大圖中，這樣做的好處就是在加載網(wǎng)頁(yè)的時(shí)候就只需要加載一次——就是咱們上面說的大圖。

2、手段：運(yùn)用了css中的background-position,這是css中的一個(gè)屬性。意思是調(diào)整css盒子中的背景圖片的位置.

3、代碼示例：.d1{background-position:0px 0px;}

此代碼意思是id名為test1的背景圖片的位置為坐標(biāo)原點(diǎn)的0位置，即默認(rèn)位置

d2{background-position:50px 50px;}

此代碼的意思是id名為test2的背景圖片的位置為原點(diǎn)位置（默認(rèn)位置）的上下左右位置的50像素距離處。

4、關(guān)于代碼和屬性的解釋可以參考“css手冊(cè)”。

看完上述內(nèi)容，你們對(duì)CSS sprite有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝大家的支持。

標(biāo)題名稱：CSSsprite是什么-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://chinadenli.net/article16/ddgcgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、外貿(mào)網(wǎng)站建設(shè)、建站公司、定制開發(fā)、靜態(tài)網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(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)