多個圖標圖片（雪碧圖）使用CSS樣式顯示
阿新 • • 發佈：2019-04-21
並發 瀏覽器 下載 頁面 方法 icons 就是 rep 樣式
現在的網頁中顯示很多圖標算是常態，發現項目中頁面上用到的圖標都是單個圖標單個文件，用的時候直接往頁面上掛，這確實很常態。
如果，網站是掛在外網上，或者網速過低，又大量使用圖標的情況下，由於瀏覽器和服務器的並發連接數是受限的，通常是4~8個，那麽圖標顯示過慢或者超時的情況就會發生。
當然了，像采用CDN，或者按照瀏覽器的並發數對圖片文件進行域名分散存儲處理也是再好不過的，但不是都有這樣的條件。
一般都會把圖標文件做的盡可能小，盡管如此，1張50k的文件比起50張1k文件下載起來還是很有優勢的。
那麽，要如何將一個圖片中的單個圖標顯示在頁面中，因為沒有切分圖片的功能。
首先，假設我們的圖標圖片是tree view中常用的：
做一個簡單的頁面，放兩個div，需要在這兩個div上分別顯示文件夾和文件圖標。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <div></div> <div></div> </body></html>
顯示方法很簡單，就是將元素的大小設成圖標的大小，圖片作為元素的背景，設置圖片的left和top讓對應的圖標被顯露出來。
定義一個默認的樣式，規定元素的大小，這裏的圖標是32*32，照樣設置元素的大小。
.tree-default { width:32px; height:32px; }
定義文件夾圖標的顯示樣式，就是講圖標圖片作為背景，按照圖標的位置調整left和top坐標值。
.tree-folder { background: url("images/tree_icons_32px.png") -260px -4px no-repeat; }
定義文件圖標的顯示樣式，調整文件圖標所在的位置。
.tree-file { background: url("images/tree_icons_32px.png") -100px -68px no-repeat; }
再給元素設上樣式。
<div class="tree-default tree-file"></div> <div class="tree-default tree-folder"></div>
完成後的效果：
這樣的處理也不是沒有條件，單張圖片也要盡可能的壓縮，不是所有的圖標都在一張圖片上，可將常用的放在一張圖片上，如果過多可分成多張圖片放置。
所有代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .tree-default{ width:32px; height:32px; } .tree-file{ background: url("images/tree_icons_32px.png") -100px -68px no-repeat; } .tree-folder{ background: url("images/tree_icons_32px.png") -260px -4px no-repeat; } </style> </head> <body> <div class="tree-default tree-file"></div> <div class="tree-default tree-folder"></div> </body> </html>
多個圖標圖片（雪碧圖）使用CSS樣式顯示