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