css精靈圖怎么實(shí)現(xiàn)定位

本篇內(nèi)容主要講解“css精靈圖怎么實(shí)現(xiàn)定位”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“css精靈圖怎么實(shí)現(xiàn)定位”吧!

精靈圖利用background-image，background-repeat，background-position的組合進(jìn)行背景定位，background-position屬性可以用數(shù)字能精確的定位出背景圖片在布局盒子對(duì)象位置。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css精靈圖，其實(shí)就是通過(guò)將多個(gè)圖片融合到一張圖里面，然后通過(guò)CSS background背景定位技術(shù)技巧布局網(wǎng)頁(yè)背景。

這樣做的好處也是顯而易見的，因?yàn)閳D片多的話，會(huì)增加http的請(qǐng)求，無(wú)疑促使了網(wǎng)站性能的減低，特別是圖片特別多的網(wǎng)站，如果能用css sprites降低圖片數(shù)量，帶來(lái)的將是速度的提升。

精靈圖產(chǎn)生背景：

1、網(wǎng)頁(yè)上的每張圖像都需要向服務(wù)器發(fā)送一次請(qǐng)求才能展現(xiàn)給用戶。

2、網(wǎng)頁(yè)上的圖像過(guò)多時(shí)，服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求，大大降低頁(yè)面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度，出現(xiàn)了CSS精靈技術(shù)（CSS Sprites）

精靈圖的定義：

1、很多圖片融合在一張圖上，通過(guò)背景定位的方式將圖標(biāo)顯示在每個(gè)盒子中。

2、背景定位的方式主要通過(guò)控制x和y軸的值。

利用“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片在布局盒子對(duì)象位置。

精靈圖使用技巧：

1、一般情況：直接一個(gè)盒子，里面的背景圖片是精靈圖，使用時(shí)注意x軸和y軸。

2、特殊情況：盒子中有一個(gè)小圖標(biāo)，此時(shí)，小圖標(biāo)外套一個(gè)標(biāo)簽（i標(biāo)簽或者span），給小圖標(biāo)設(shè)置定位后（自動(dòng)轉(zhuǎn)成行內(nèi)塊）定義寬高，這個(gè)寬高就是精靈圖中的小圖的寬高，然后注意x軸和y軸的值。

示例：

HTML代碼

<ul class="Sprites"> 
    <li><span class="a1"></span><a href="#">WORD文章標(biāo)題</a></li> 
    <li><span class="a2"></span><a href="#">PPT內(nèi)容標(biāo)題</a></li> 
    <li><span class="a3"></span><a href="#">Excel內(nèi)容標(biāo)題</a></li> 
    <li><span class="a4"></span><a href="#">PDF內(nèi)容標(biāo)題</a></li> 
    <li><span class="a5"></span><a href="#">文本文檔標(biāo)題</a></li> 
</ul>

css代碼

ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} 
ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} 
ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;  
overflow:hidden;background-image: url(ico.png);background-repeat:no-repeat;} 
ul.Sprites li a{ padding-left:5px} 
ul.Sprites li span.a1{ background-position: -62px -32px} 
ul.Sprites li span.a2{ background-position: -86px -32px} 
ul.Sprites li span.a3{ background-position: -110px -32px} 
ul.Sprites li span.a4{ background-position: -133px -32px} 
ul.Sprites li span.a5{ background-position: -158px -32px}

css sprites關(guān)鍵代碼與解釋

ul.Sprites li span.a1{ background-position: -62px -32px} 
ul.Sprites li span.a2{ background-position: -86px -32px} 
ul.Sprites li span.a3{ background-position: -110px -32px} 
ul.Sprites li span.a4{ background-position: -133px -32px} 
ul.Sprites li span.a5{ background-position: -158px -32px}

首先對(duì)ul.Sprites li span引入背景

ul.Sprites li span{ background-image: url(ico.png);background-repeat:no-repeat;} 給span設(shè)置css背景圖片。

再分別對(duì)不同span class設(shè)置對(duì)于圖標(biāo)背景定位具體值

• ul.Sprites li span.a1{ background-position: -62px -32px}設(shè)置背景圖片作為對(duì)應(yīng)盒子對(duì)象背景后向左“拖動(dòng)”62px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

• ul.Sprites li span.a2{ background-position: -86px -32px}設(shè)置背景圖片作為對(duì)應(yīng)盒子對(duì)象背景后向左“拖動(dòng)”86px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

• ul.Sprites li span.a3{ background-position: -110px -32px}設(shè)置背景圖片作為對(duì)應(yīng)盒子對(duì)象背景后向左“拖動(dòng)”110px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

• ul.Sprites li span.a4{ background-position: -133px -32px}設(shè)置背景圖片作為對(duì)應(yīng)盒子對(duì)象背景后向左“拖動(dòng)”133px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

• ul.Sprites li span.a5{ background-position: -158px -32px}設(shè)置背景圖片作為對(duì)應(yīng)盒子對(duì)象背景后向左“拖動(dòng)”158px，向上“拖動(dòng)”32px開始顯示此背景圖標(biāo)

關(guān)鍵：

背景background-position有兩個(gè)數(shù)值，前一個(gè)代表靠左距離值（可為正可為負(fù)），第二個(gè)數(shù)值代表靠上距離值（可為正可為負(fù)）

背景background-position有兩個(gè)數(shù)值可以為正可以為負(fù)，當(dāng)為正數(shù)時(shí)，代表背景圖片作為對(duì)象盒子背景圖片時(shí)靠左和考上多少距離多少開始顯示背景圖片；當(dāng)為負(fù)數(shù)時(shí)代表背景圖片作為盒子對(duì)象背景圖片，將背景圖片拖動(dòng)超出盒子對(duì)象左邊多遠(yuǎn)，拖動(dòng)超出盒子對(duì)象上邊多遠(yuǎn)開始顯示此背景圖片。

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

到此，相信大家對(duì)“css精靈圖怎么實(shí)現(xiàn)定位”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！