讓你顯示一個天氣圖標你會怎么顯示呢？讓你做一個簡單的動圖你會怎么采用什么方式呢？讓你輸出一個長期固定的圖標列表你會怎么編寫代碼呢？

如果不管性能，不用css，不用js，可能你會這么寫html：

<

類似這樣便是最原始的圖片序列編寫方式。然而即使有emmet加持，這種編寫仍然費功夫而且瀏覽器的請求次數變多，網頁更容易延遲。而使用精靈圖的方法則可以更高效解決上述問題。

介紹一下精靈圖：就是把多張小圖片拼接成一張大圖片，通過定位，設置X，Y軸坐標的值，并讓超出部分隱藏，這樣就可以顯示圖片的局部，也就是我們想要的部分，這樣做有利于頁面優化，當頁面加載時，不是加載每個單獨圖片，而是一次加載整個組合圖片。它大大減少了HTTP請求的次數，減輕服務器壓力，同時縮短了懸停加載圖片所需要的時間延遲，使效果更流暢，不會停頓。所以對于小圖標列表表單來說，精靈圖是一個是十分舒服的一種方式。

用css 定義一個4排的圖標陣列。

<

CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，一堆圖標只用請求一次。，background-position 可以用數字精確的定位出背景圖片的位置。

網絡上的精靈圖

然后通過JavaScript改變不同不同位置的顯示，就有點像放著一個相框和一個背景，然后每移動一次背景，在相框中可以看到不同的圖像。

JavaScript編寫如下

<

通過循環改變圖片顯示的不同坐標，起到了“移動背景布”的作用。

最后輸出結果類似這樣：

CSS Sprites 看上去十分愉快，同上面的html簡單方法顯示一樣，能很好地減少網頁的http請求，從而大大的提高頁面的性能，而代碼也簡潔大方。

而比如天氣圖標也可以這樣修改。讓精靈圖包括晴雨雪等圖標，然后當傳入天氣信息時便可以改變。

還有rpg游戲中的人物移動時的圖片變換，都可以使用這種辦法。

---

關鍵詞：html+css+js 精靈圖

總結

以上是生活随笔為你收集整理的html背景图不显示_批量显示多张有序排列的图标，使用精灵图CSS Sprites这种办法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。