css中怎么用圖片定位把所有圖標放在一張圖上

本篇內容主要講解“css中怎么用圖片定位把所有圖標放在一張圖上”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css中怎么用圖片定位把所有圖標放在一張圖上”吧!

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

還有最重要的一點，就是涉及到用戶動作才表現(xiàn)的圖片，例如鼠標移上/移下的圖片切換，由于是由動作觸發(fā)的，所以在動作觸發(fā)前是不會加載的，而當需要時再從服務器下載，這之間又需要一定的時間，如果圖片較大，此時網(wǎng)絡質量又不太好，就會出現(xiàn)頁面空白。而以上這一切，如果你將所有需要的圖片放到一張圖片上，這些問題就都不會有了。因為在網(wǎng)頁加載時這張圖片就已經(jīng)從服務器上下載來了，所以不會出現(xiàn)丟失，未加載等現(xiàn)象。

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

為了使某處富于表現(xiàn)力，比如菜單，導航等，往往會用到鼠標移上移下的不同樣式表現(xiàn)，最簡單的就是圖片切換了。比如兩張圖片，一張用于鼠標未指向時，另一張用于鼠標移上去時。為了使第二張圖片無縫載入，就需要將這兩張圖片放到一起。比如本站右上角的那圖案，初始時是灰色，鼠標移上則變?yōu)椴噬＜词怯玫搅舜藦垐D片：

 

css中定義:

代碼如下:

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

對了，有必要說一下網(wǎng)頁對于圖片的處理，seo中建議圖片盡量不直接寫入網(wǎng)頁。對于需要用一張圖片，傳統(tǒng)做法是<img src=“源圖片”/>引入。因為圖片搜索引擎無法收錄，所以我推薦用css表現(xiàn)。如何做呢？舉個實例吧：

比如要將一張200X50的圖片放入頁面，傳統(tǒng)做法是

代碼如下:

<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的區(qū)域整個塊級化。

回到正文來，我此處就是用css裝入這張圖片的。上面css中我只寫了重要的部分，其余省略。加粗部分“l(fā)eft 15px”就是定位圖片了，相比較而言，這個只有兩張圖片的比較容易。left即是水平方向從最左端加載，15px是針對我自己的網(wǎng)站而言，由于圖片所屬整個層區(qū)域高度相對圖片較大，所以需要圖片往下靠一點。你可以理解為在整張圖片上高度增加了15px。

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

上面是我自己的例子，關于大量處于同一張圖片上的定位，以及如何處理位于同一張圖片上的各個圖標更容易等，下次再說。

到此，相信大家對“css中怎么用圖片定位把所有圖標放在一張圖上”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！