css精靈圖怎麼定位

精靈圖利用background-image，background-repeat，background-position的組合進行背景定位，background-position屬性可以用數字能精確的定位出背景圖片在佈局盒子物件位置。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css精靈圖，其實就是透過將多個圖片融合到一張圖裡面，然後透過CSS background背景定位技術技巧佈局網頁背景。

這樣做的好處也是顯而易見的，因為圖片多的話，會增加http的請求，無疑促使了網站性能的減低，特別是圖片特別多的網站，如果能用css sprites降低圖片數量，帶來的將是速度的提升。

精靈圖產生背景：

1、網頁上的每張圖片都需要向伺服器發送一次請求才能展現給使用者。

2、網頁上的圖片太多時，伺服器就會頻繁地接受和傳送請求，大大降低頁面的載入速度。為了有效地減少伺服器接受和發送請求的次數，提高頁面的載入速度，出現了CSS精靈技術（CSS Sprites）

精靈圖的定義：

1.很多圖片融合在一張圖上，透過背景定位的方式將圖示顯示在每個盒子中。

2、背景定位的方式主要透過控制x和y軸的值。

利用“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片在佈局盒子物件位置。

精靈圖使用技巧：

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

2、特殊情況：盒子中有一個小圖標，此時，小圖標外套一個標籤（i標籤或span），給小圖標設定定位後（自動轉成行內塊）定義寬高，這個寬高就是精靈圖中的小圖的寬高，然後注意x軸和y軸的值。

範例：

精靈圖

#HTML程式碼

<ul class="Sprites"> 
    <li><span class="a1"></span><a href="#">WORD文章标题</a></li> 
    <li><span class="a2"></span><a href="#">PPT内容标题</a></li> 
    <li><span class="a3"></span><a href="#">Excel内容标题</a></li> 
    <li><span class="a4"></span><a href="#">PDF内容标题</a></li> 
    <li><span class="a5"></span><a href="#">文本文档标题</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關鍵程式碼與解釋

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}

首先對ul.Sprites li span引入背景

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

再分別對不同span class設定對於圖示背景定位具體值

• ul.Sprites li span.a1{ background-position: -62px -32px }設定背景圖片作為對應盒子物件背景後向左「拖曳」62px，向上「拖曳」32px開始顯示此背景圖示

• ul.Sprites li span.a2{ background-position: -86px -32px}設定背景圖片作為對應盒子物件背景後向左「拖曳」86px，向上「拖曳」32px開始顯示此背景圖示

• #ul.Sprites li span.a3{ background-position: -110px -32px}設定背景圖片作為對應盒子物件背景後向左「拖曳」110px，向上「拖動」32px開始顯示此背景圖示

• ul.Sprites li span.a4{ background-position: -133px -32px}設定背景圖片作為對應盒子對象背景後向左「拖曳」133px，向上「拖曳」32px開始顯示此背景圖示

• ul.Sprites li span.a5{ background-position: -158px -32px}設定背景圖片作為對應盒子物件背景後向左「拖曳」158px，向上「拖曳」32px開始顯示此背景圖示

## 關鍵：

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

背景background-position有兩個數值可以為正可以為負，當為正數時，代表背景圖片作為物件盒子背景圖片時靠左和考上多少距離多少開始顯示背景圖片；當為負數時代表背景圖片作為盒子物件背景圖片，將背景圖片拖曳超出盒子物件左邊多遠，拖曳超出盒子物件上邊多遠開始顯示此背景圖片。

（學習影片分享：

css影片教學）

以上是css精靈圖怎麼定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！