很多網站喜歡將小圖標拼在一個圖片文件裏. 然後在 CSS 中通過 background 定位訪問圖標, 訪問量大的網站尤是如此. 爲什麼呢? 分開管理不是更加靈活嗎?
大家都這麼做當然有它的優點, 但這同樣存在缺點.
優點:
A. 1 + 1 < 2
圖標放在一起, 可以令圖標的總容量稍小一點. 這不是最重要的, 但我可以告訴你, 很多程序員都是完美主義者.
B. 讓連接次數大量減少
用過 Opera 的朋友可能會對它那個顯示圖片下載的進度條印象很深, 它會顯示 “已下載圖片/圖片總數”. 對於 Web 服務器上的每個獨立資源, 都需要去連接和獲取的. 所以大家都設法將很多圖標放在一個圖片上, 連接一次就全部取回來. 這也許是一圖多標的主要目的.
C. 讓瀏覽器將圖標預先下載
瀏覽器爲了儘快地顯示頁面, 一般只是將打開頁面時用到的圖片下載到本地, 而一些可能用到, 但沒有立刻被用到的圖片需要在應用的時候再進行下載. 最經典的例子可能是導航菜單的 Tab 圖標, 如果普通狀態的 Tab 圖標和鼠標懸停時的圖標都是獨立放置的, 那麼當你鼠標移動到 Tab 按鈕時, 圖標纔開始下載, 這樣會帶給用戶很不好的視覺效果. 所以我覺得遇到這種情況時, 將多個圖標合併在一起的處理是必須的.
缺點
A. 圖片難以管理, 難以定位
如果你要更換一個圖標, 那麼你需要編輯整個大圖片. 如果你要改變一個圖標的大小, 很可能你需要重新計算它的位置, 甚至無從下手, 只能在別的位置再添加一個圖標.
B. 2 > 1
兩個圖標合成的圖片是肯定比其中一個圖標獨佔的圖片大的, 也就是說, 下載這個圖片所需的時間將比單獨一個圖標用的時間長. 瀏覽器顯示圖片一般都是下載完則顯示或者邊下載邊顯示的, 如果你那幾個圖標組成的圖片容量比較大, 那麼它們不能逐個顯示予用戶, 會造成很不好的用戶體驗.
應用
A. 讓圖標儘量排列得有規律
有規律地排放的圖標跟容易定位和維護, 這裏的間隔可以使用 16, 32, 48, 96 等標準尺寸.
B. 將背景顏色一致的圖標放置在一起
如果背景顏色不一樣, 最好分爲兩個或多個圖片放置, 特別是背景顏色相近的, 很容易混淆.
C. 將相同欄目的圖標放置在一起
這樣可以少寫一些 CSS 代碼. 設置一個 background, 再在每個項設置 background-position 就行了.
D. 不要將大圖綁在一塊
大部分用戶都不會耐心地等待頁面的所以文件被下載完畢再進行閱讀, “不耐煩” 會驅使他們去點 close.
用法
比如上圖，我們先選中要顯示的圖標，假如是垃圾桶，我們獲取它的大小，寬度、高度，在獲取它的y座標和x座標
樣式可以這樣寫
<style>
.icon{background: url("Icons.png") -112px -78px; width:32px;height: 35px; border: 0px;cursor: pointer;}
</style>
<body> <div class="icon"></div> </body>
結果就找到了
實現的辦法很簡單吧，趕快也試試吧！
http://www.php1.cn/Content/WeiHeYaoJiangDuoGeTuBiaoFangZaiYiZhangBeiJingTuLi.html