CSS 精靈,也叫 CSS Sprites,是一種網(wǎng)頁圖片應(yīng)用處理方式。把網(wǎng)頁中一些背景圖片整合到一張圖片文件中,再用background-position 精確的定位出背景圖片的位置。
精靈圖的作用是減少服務(wù)器被請(qǐng)求次數(shù),減輕服務(wù)器的壓力,提高頁面加載速度。
實(shí)現(xiàn)步驟:
1. 創(chuàng)建盒子,盒子尺寸與小圖尺寸相同
2. 設(shè)置盒子背景圖為精靈圖
3. 添加 background-position 屬性,改變背景圖位置,使用 PxCook 測(cè)量小圖片左上角坐標(biāo),取負(fù)數(shù)坐標(biāo)為 background-position 屬性值(向左上移動(dòng)圖片位置)。
案例:京東服務(wù)
下面我們以京東服務(wù)的圖標(biāo)為例。
添加上圖中的精靈圖,需要的代碼如下:
Copyright ? 2013-2021 河南云和數(shù)據(jù)信息技術(shù)有限公司 豫ICP備14003305號(hào) ISP經(jīng)營(yíng)許可證:豫B-20160281