手機網站建設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屬性從背景圖片中定位選取需要顯示的那一部分背景圖,降低了瀏覽器向服務器的請求次數,提高了網頁的加載速度。

相關文章
亚洲日韩欧美制服二区dvd_米奇777超碰欧美日韩亚洲_中文字幕亚洲日韩无线码