手機網(wǎng)站建設CSS Sprites原理
日期 : 2020-12-12 21:05:32
CSS Sprites原理。CSS Sprites基本思路是首先把網(wǎng)頁(yè)中需要用到的大小一致、背景透明等特性的小圖片整合到一張圖片文件中。
然后再利用background-image、background-repeat、background-position或者background等CSS屬性進(jìn)行背景定位，其中background-image屬性用于設置元素背景圖片地址，background-repeat屬性用于設置背景圖片是否平鋪，background-position屬性用于定位背景圖片的坐標原點(diǎn)位置，最后通過(guò)引用CSS樣式，使整合圖片中不同位置的小圖片以背景的形式顯示在元素內。
由于整合圖片的總體面貌沒(méi)有發(fā)生變化，只是調整了圖片的顯示區域。就好比打碼機中雕刻字帶上的數字，可以根據需要靈活調整當前打印的數字，其它非當前數字只是被移動(dòng)了位置。當多個(gè)大小相同的元素引用同一個(gè)背景圖時(shí)，只需要從服務(wù)器下載一次背景圖片文件，然后再通過(guò)background-position屬性從背景圖片中定位選取需要顯示的那一部分背景圖，降低了瀏覽器向服務(wù)器的請求次數，提高了網(wǎng)頁(yè)的加載速度。
然后再利用background-image、background-repeat、background-position或者background等CSS屬性進(jìn)行背景定位，其中background-image屬性用于設置元素背景圖片地址，background-repeat屬性用于設置背景圖片是否平鋪，background-position屬性用于定位背景圖片的坐標原點(diǎn)位置，最后通過(guò)引用CSS樣式，使整合圖片中不同位置的小圖片以背景的形式顯示在元素內。
由于整合圖片的總體面貌沒(méi)有發(fā)生變化，只是調整了圖片的顯示區域。就好比打碼機中雕刻字帶上的數字，可以根據需要靈活調整當前打印的數字，其它非當前數字只是被移動(dòng)了位置。當多個(gè)大小相同的元素引用同一個(gè)背景圖時(shí)，只需要從服務(wù)器下載一次背景圖片文件，然后再通過(guò)background-position屬性從背景圖片中定位選取需要顯示的那一部分背景圖，降低了瀏覽器向服務(wù)器的請求次數，提高了網(wǎng)頁(yè)的加載速度。
相關(guān)文章
精彩導讀
熱門(mén)資訊
