css中怎么用圖片定位把所有圖標(biāo)放在一張圖上

本篇內(nèi)容主要講解“css中怎么用圖片定位把所有圖標(biāo)放在一張圖上”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“css中怎么用圖片定位把所有圖標(biāo)放在一張圖上”吧!

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),紅古企業(yè)網(wǎng)站建設(shè),紅古品牌網(wǎng)站建設(shè),網(wǎng)站定制,紅古網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,紅古網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

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

為了使某處富于表現(xiàn)力，比如菜單，導(dǎo)航等，往往會(huì)用到鼠標(biāo)移上移下的不同樣式表現(xiàn)，最簡(jiǎn)單的就是圖片切換了。比如兩張圖片，一張用于鼠標(biāo)未指向時(shí)，另一張用于鼠標(biāo)移上去時(shí)。為了使第二張圖片無(wú)縫載入，就需要將這兩張圖片放到一起。比如本站右上角的那圖案，初始時(shí)是灰色，鼠標(biāo)移上則變?yōu)椴噬?。即是用到了此張圖片：

 

css中定義:

代碼如下:

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

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

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

代碼如下:

<img src=“源圖片”height=”200px” width=”50px”/>

而用css，則可以在頁(yè)面中寫(xiě)入<span id=”img”></span>，css中這樣寫(xiě)：

代碼如下:

#img{display:block;width:50px;height:200px;background:url(源圖片);}

為什么要用display:block;？display:block;就是將行內(nèi)元素強(qiáng)行轉(zhuǎn)化為塊級(jí)元素。此處作用就是將整個(gè)寬200高50的區(qū)域整個(gè)塊級(jí)化。

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

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

上面是我自己的例子，關(guān)于大量處于同一張圖片上的定位，以及如何處理位于同一張圖片上的各個(gè)圖標(biāo)更容易等，下次再說(shuō)。

到此，相信大家對(duì)“css中怎么用圖片定位把所有圖標(biāo)放在一張圖上”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

標(biāo)題名稱(chēng)：css中怎么用圖片定位把所有圖標(biāo)放在一張圖上
標(biāo)題鏈接：http://muchs.cn/article32/iioisc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、服務(wù)器托管、響應(yīng)式網(wǎng)站、電子商務(wù)、網(wǎng)頁(yè)設(shè)計(jì)公司、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)