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