手機網(wǎng)站建設(shè)
手機網(wǎng)站建設(shè)CSS Sprites原理
發(fā)布：2020-12-12 15:30:50 瀏覽：3509
CSS Sprites原理。CSS Sprites基本思路是首先把網(wǎng)頁中需要用到的大小一致、背景透明等特性的小圖片整合到一張圖片文件中。
然后再利用background-image、background-repeat、background-position或者background等CSS屬性進行背景定位，其中background-image屬性用于設(shè)置元素背景圖片地址，background-repeat屬性用于設(shè)置背景圖片是否平鋪，background-position屬性用于定位背景圖片的坐標原點位置，最后通過引用CSS樣式，使整合圖片中不同位置的小圖片以背景的形式顯示在元素內(nèi)。
由于整合圖片的總體面貌沒有發(fā)生變化，只是調(diào)整了圖片的顯示區(qū)域。就好比打碼機中雕刻字帶上的數(shù)字，可以根據(jù)需要靈活調(diào)整當前打印的數(shù)字，其它非當前數(shù)字只是被移動了位置。當多個大小相同的元素引用同一個背景圖時，只需要從服務(wù)器下載一次背景圖片文件，然后再通過background-position屬性從背景圖片中定位選取需要顯示的那一部分背景圖，降低了瀏覽器向服務(wù)器的請求次數(shù)，提高了網(wǎng)頁的加載速度。
>>> 查看《手機網(wǎng)站建設(shè)CSS Sprites原理》更多相關(guān)資訊 <<<
本文地址：http://yunshengqh.cn/news/html/22328.html
