html背景图不显示_批量显示多张有序排列的图标,使用精灵图CSS Sprites这种办法...
讓你顯示一個天氣圖標你會怎么顯示呢?讓你做一個簡單的動圖你會怎么采用什么方式呢?讓你輸出一個長期固定的圖標列表你會怎么編寫代碼呢?
如果不管性能,不用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这种办法...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python contains类似函数_
- 下一篇: python三引号注释_python使用