CSS 多圖片融合背景定位的應(yīng)用于優(yōu)缺點分析

發(fā)布時間：2009-12-17 14:20:56 作者：佚名

萬物都是相通的, 軟件和互聯(lián)網(wǎng)技術(shù)也一樣. 如果圖片作為網(wǎng)絡(luò)資源需要每個進行連接來獲取, 那么 .js 文件和 .css 文件也是如此. 我們應(yīng)該將可能放在一起的資源綁起來. 這樣可以為你省下一些資源, 也可以滿足你追求完美的虛榮.

1. 關(guān)鍵字, 例如: background-position: top right;
優(yōu)點: 直觀, 可用性高, 各瀏覽器中表現(xiàn)一致.
缺點: 缺少間隔尺寸. 三個垂直的 (top, center, bottom) 和三個水平的 (left, center, right) 只能為你組合出最多 9 個位置. 不存在其他混式的組合. 并且很難像其他兩種數(shù)值定位方法一樣使用算數(shù)進行控制.

2. 像素, 例如: background-position: 0px 0px;
優(yōu)點: 概念容易被理解, 只要知道如何測量容器左上角和圖片左上角之間的距離, 就能準確地推測出圖片顯示的位置. 像素還能夠精確的用數(shù)學(xué)來控制定位.
缺點: 你必須知道確實的值.
原理, 如圖. 其實就是圖片左上角相對于容器左上角的坐標關(guān)系.
Pixels

3. 百分比, 例如: background-position: 80% 50%;
優(yōu)點: 可以使用數(shù)學(xué)來控制定位, 并且比像素定位更加靈活.
缺點: IE 中無法處理復(fù)雜的百分比定位.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Percentage positioning of background-image</title> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> <style> body { font-family:Arial, Helvetica, sans-serif } .box1, .box2, .box3, .box4 { float:left; margin-right:1em; width:100px; height:100px; position:relative; background: #F3F2E2 url(//img.jbzj.com/demoimg/200912/1234.png) no-repeat; font-size:9px; text-align:center; } .box1 { background-position:0% 0%; } .box2 { background-position:35% 0%; } .box3 { background-position:66.6666666666666% 0% } .box4 { background: #F3F2E2 url(//img.jbzj.com/demoimg/200912/1234.png) 100% 0% no-repeat; } .wrap { clear:both; overflow:hidden; } p { clear:both; overflow:hidden; } </style> </head> <body> <div class="wrap"> <div class="box1" style="background-position:0% 0%"> background-position: 0% 0%</div> <div class="box2" style="background-position:0% 33.33333%"> background-position: 0% 33.33333%</div> <div class="box3" style="background-position:0% 66.66666%"> background-position: 0% 66.66666%</div> <div class="box4" style="background-position:0% 100%"> background-position: 0% 100%</div> <p>DIVs set at 100px X 100px with their <code>background-image</code> set as the sprite graphic </p> </div> <img src="http://img.jbzj.com/demoimg/200912/1234.png" alt="1234" style="margin-top:2em; clear:both" /> <p>The original sprite graphic. </p> </body> </html> </head> <body> </body> </html>

提示：您可以先修改部分代碼再運行

原理, 如圖. 與像素定位不同, 它的百分比位置是指容器和圖片內(nèi)部的相應(yīng)位置作為顯示的位置.
Percentages

SOSO
在制作網(wǎng)頁時, 為什么要將多個圖標放在一個圖片文件里面呢?

經(jīng)常在網(wǎng)上搜羅資源的朋友可能會發(fā)現(xiàn), 很多網(wǎng)站喜歡將小圖標拼在一個圖片文件里. 然后在 CSS 中通過 background-position 定位訪問圖標, 訪問量大的網(wǎng)站尤是如此. 為什么呢? 分開管理不是更加靈活嗎?
大家都這么做當然有它的優(yōu)點, 但這同樣存在缺點.

優(yōu)點:

1. 1 + 1 < 2
圖標放在一起, 可以令圖標的總?cè)萘可孕∫稽c. 這不是最重要的, 但我可以告訴你, 很多程序員都是完美主義者.

2. 讓連接次數(shù)大量減少
用過 Opera 的朋友可能會對它那個顯示圖片下載的進度條印象很深, 它會顯示 “已下載圖片/圖片總數(shù)”. 對于 Web 服務(wù)器上的每個獨立資源, 都需要去連接和獲取的. 所以大家都設(shè)法將很多圖標放在一個圖片上, 連接一次就全部取回來. 這也許是一圖多標的主要目的.
tabs

3. 讓瀏覽器將圖標預(yù)先下載
瀏覽器為了盡快地顯示頁面, 一般只是將打開頁面時用到的圖片下載到本地, 而一些可能用到, 但沒有立刻被用到的圖片需要在應(yīng)用的時候再進行下載. 最經(jīng)典的例子可能是導(dǎo)航菜單的 Tab 圖標, 如果普通狀態(tài)的 Tab 圖標和鼠標懸停時的圖標都是獨立放置的, 那么當你鼠標移動到 Tab 按鈕時, 圖標才開始下載, 這樣會帶給用戶很不好的視覺效果. 所以我覺得遇到這種情況時, 將多個圖標合并在一起的處理是必須的.

缺點:

1. 圖片難以管理, 難以定位
如果你要更換一個圖標, 那么你需要編輯整個大圖片. 如果你要改變一個圖標的大小, 很可能你需要重新計算它的位置, 甚至無從下手, 只能在別的位置再添加一個圖標.

2. 2 > 1
兩個圖標合成的圖片是肯定比其中一個圖標獨占的圖片大的, 也就是說, 下載這個圖片所需的時間將比單獨一個圖標用的時間長. 瀏覽器顯示圖片一般都是下載完則顯示或者邊下載邊顯示的, 如果你那幾個圖標組成的圖片容量比較大, 那么它們不能逐個顯示予用戶, 會造成很不好的用戶體驗.

應(yīng)用:

1. 讓圖標盡量排列得有規(guī)律
有規(guī)律地排放的圖標跟容易定位和維護, 這里的間隔可以使用 16, 32, 48, 96 等標準尺寸.

2. 將背景顏色一致的圖標放置在一起
如果背景顏色不一樣, 最好分為兩個或多個圖片放置, 特別是背景顏色相近的, 很容易混淆.

3. 將相同欄目的圖標放置在一起
這樣可以少寫一些 CSS 代碼. 設(shè)置一個 background, 再在每個項設(shè)置 background-position 就行了.

4. 不要將大圖綁在一塊
大部分用戶都不會耐心地等待頁面的所以文件被下載完畢再進行閱讀, “不耐煩” 會驅(qū)使他們?nèi)c close.

拓展:

萬物都是相通的, 軟件和互聯(lián)網(wǎng)技術(shù)也一樣. 如果圖片作為網(wǎng)絡(luò)資源需要每個進行連接來獲取, 那么 .js 文件和 .css 文件也是如此. 我們應(yīng)該將可能放在一起的資源綁起來. 這樣可以為你省下一些資源, 也可以滿足你追求完美的虛榮.

但切忌過度. 并不是所有東西都可以綁一塊的, 沒有人會將洗衣粉和餅干纏在一起的. 將有相關(guān)性的, 或者特別零碎的放在一起都是可以的, 我相信聰明的你一定會有自己的一套分類方法.