淺談css中圖片定位之所有表徵圖放在一張圖上

如今做網頁為了使網站豐富多彩，富於表現力，往往需要應用大量的圖片/表徵圖。如何處理這些圖片，使其盡量不影響網頁載入，解析等速度，是一個不大不小的問題。如果你的網站用各種表徵圖圖案裝飾的靚麗無比，但是需要等待較長的時間載入，那麼相信很多使用者會等不及而離開。盡量將圖片做的小些，可能是大部分人選擇的解決之道。但是100張1kb的圖片載入與一張100kb的圖片載入，這之間又是不同的，這涉及到網站伺服器的同時串連數，網路品質等。但是，顯然，載入一張圖片要遠比載入多張圖片簡便的多。

      還有最重要的一點，就是涉及到使用者動作才表現的圖片，例如滑鼠移上/移下的圖片切換，由於是由動作觸發的，所以在動作觸發前是不會載入的，而當需要時再從伺服器下載，這之間又需要一定的時間，如果圖片較大，此時網路品質又不太好，就會出現頁面空白。而以上這一切，如果你將所有需要的圖片放到一張圖片上，這些問題就都不會有了。因為在網頁載入時這張圖片就已經從伺服器上下載來了，所以不會出現丟失，未載入等現象。

      對於老鳥來說，這一點可能已經成為一種意識，他們都很自覺，下意識的就會這麼做，但是對於新手，初接觸網頁的人來說，可能還停留在用到哪張圖片就單獨處理哪張圖片的階段。我當然也是新手，之前在做網站右上方的一張圖片切換時，就是做了兩張不同的圖片，結果往往容易碰到網速不好時，第二張圖片不能及時載入上來。於是今天便將其處理了一下，整到了一張圖片上。我比較懶，後期往網站上添加一些內容時，懶得去動以前的東西，所以後期某些地方加入的表徵圖啥的都是單獨一張小表徵圖加上去的，也沒與之前的整合。但是，有一些尺寸稍大的，就不行了，就像我今天處理的，總是有延遲。現在我就拿其做個例子，說說css中圖片定位及整合的好處。

      為了使某處富於表現力，比如菜單，導航等，往往會用到滑鼠移上移下的不同樣式表現，最簡單的就是圖片切換了。比如兩張圖片，一張用於滑鼠未指向時，另一張用於滑鼠移上去時。為了使第二張圖片無縫載入，就需要將這兩張圖片放到一起。比如本站右上方的那圖案，初始時是灰色，滑鼠移上則變為彩色。即是用到了此張圖片：

 

css中定義:

.ltlogo a{background:url("img/ltlogo.gif") no-repeat left 15px;}
.ltlogo a:hover{background:url("img/ltlogo.gif") no-repeat left bottom;}

對了，有必要說一下網頁對於圖片的處理，seo中建議圖片盡量不直接寫入網頁。對於需要用一張圖片，傳統做法是<img src=“源圖片”/>引入。因為圖片搜尋引擎無法收錄，所以我推薦用css表現。如何做呢？舉個執行個體吧：

比如要將一張200X50的圖片放入頁面，傳統做法是
<img src=“源圖片”height=”200px” width=”50px”/>

而用css，則可以在頁面中寫入<span id=”img”></span>，css中這樣寫：
#img{display:block;width:50px;height:200px;background:url(源圖片);}

為什麼要用display:block;？display:block;就是將行內元素強行轉化為區塊層級元素。此處作用就是將整個寬200高50的地區整個塊級化。

      回到本文來，我此處就是用css裝入這張圖片的。上面css中我唯寫了重要的部分，其餘省略。加粗部分“left 15px”就是定位元影像片了，相比較而言，這個只有兩張圖片的比較容易。left即是水平方向從最左端載入，15px是針對我自己的網站而言，由於圖片所屬整個層地區高度相對圖片較大，所以需要圖片往下靠一點。你可以理解為在整張圖片上高度增加了15px。

      第二個“left bottom”，就是滑鼠移上去時的所需圖片。第二張圖片我放在最底部，所以垂直方向直接用bottom從底部定位。

      上面是我自己的例子，關於大量處於同一張圖片上的定位，以及如何處理位於同一張圖片上的各個表徵圖更容易等，下次再說。當然，我是初學者，所用名詞、術語有所不當，所說內容有錯誤之處，老鳥經過，還望指教。網頁製作

 

本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/dengxingbo/archive/2010/03/15/5381647.aspx