什么時(shí)候精靈圖呢？

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比臨沂網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式臨沂網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋臨沂地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

通常在渲染頁面的時(shí)候，需要服務(wù)器向我們發(fā)送數(shù)據(jù)，但有的時(shí)候一個(gè)頁面需要多張圖時(shí)，服務(wù)器就會處于連續(xù)發(fā)圖的工作狀態(tài)，但如果我們把需要的圖都放在一張圖上，這樣可以大大的減少服務(wù)的工作負(fù)擔(dān)，打個(gè)比喻。服務(wù)器發(fā)一張圖是，工作流程是：找到圖片——讀取圖片——發(fā)送圖片，如果是發(fā)送5個(gè)圖片時(shí)，那么服務(wù)器就需要重復(fù)執(zhí)行五遍這個(gè)操作，但是每次服務(wù)器在執(zhí)行IO操作時(shí)，都會占用服務(wù)器的內(nèi)存和處理器性能，而如果是只發(fā)送一張圖片的話，盡管圖片會大，但是她只占用一次內(nèi)存和處理器性能，更多的占用網(wǎng)絡(luò)資源，但一張圖能有多大呢？

同時(shí)在渲染時(shí)，也不用等那五個(gè)圖片都發(fā)送過來，又要執(zhí)行五次接受——讀取——渲染的工作的，這對前端渲染頁面時(shí)也是有好處的，提高了頁面加載速度（總結(jié)：減輕服務(wù)器工作負(fù)擔(dān)，減少服務(wù)器發(fā)送次數(shù)，提高頁面加載速度）

怎么使用？

首先我們需要一個(gè)行內(nèi)標(biāo)簽（span等，注意行內(nèi)標(biāo)簽的高寬是不起作用的）來存放圖片，注意這個(gè)容器的大小要和我們需要的小圖尺寸是一樣的。

將精靈圖設(shè)置為背景圖片（如果是img，整個(gè)都會露出來），

測量小圖在大圖中的位置，使用background-position：x，y背景屬性來實(shí)現(xiàn)位置的移動，分別取負(fù)數(shù)設(shè)置給盒子的background-position：x y。x是水平位置，y是垂直位置。