CSS Sprite雪碧圖應用

　　在寫網頁過程當中，會遇到這種須要使用多個小圖標:

　　

　　如上圖中的「女裝」文字左邊的圖標。容易想到的解決方法是爲每張圖片加入<img>標籤，但這樣作會增長HTTP請求數量，影響網站加載速度。比這更優的解決方案是：雪碧圖sprite。

　　所謂雪碧圖就是把咱們所須要的全部小圖片用CSS sprite或者PS工具拼接成一張大圖片，而後經過元素的background-image、background-positon屬性完成圖片的定位。

　　爲此，我作了個Demo。

　　

　　 在學習的過程當中，遇到了背景圖片定位的問題，也就是background-position屬性使用以及如何在這張大圖片中定位到要顯示的小圖標。

　　 問題簡化就是：

  　

　　答案是把這張圖片設置爲div的背景圖。而後移動圖片使圖片3在div區域顯示。

　　假設4張小圖大小同樣，都是25x25像素，div也是25x25像素。由於把大圖片設置爲div的背景圖時，默認圖片的左上角頂點是與div區域的頂點重合的，因此要將「小圖片3」向上垂直移動，水平方向保持不變。所以設置background-position:0px,-25px;(圖片像素的定位可用CSS sprite工具查看)。

　　就是這麼個簡單的問題，但我以前出於兩點理解失誤始終理解不了爲何像素值是負數。好比一個無序列表<ul>中每一項的<li>都設置背景圖片爲這個大圖片，當顯示的時候，就像在一張完整的圖片每一個區域開個洞，各自看這張大圖的局部，我這樣理解就解釋不了兩個<li>怎麼都顯示同樣的小圖片。我之因此有這樣的理解是由於我忽略了每一個li獨自擁有這張大圖，而後再移動這張大圖，想顯示哪一個區域就顯示哪一個區域。再，爲何像素值是負數呢？我網上搜，發現也有不理解的網友認爲直接把這個像素值爲負數記住就行，有網友認爲是div頂點動，圖片不動，但也解釋不通。後來查到的兩句話點醒了我：

• 怎麼說呢，圖片定位技術，實際上至關於開了一個窗戶，你透過窗戶看外面的景色。你的窗戶大小是不會變的，可是景色卻能改變位置，整張雪碧圖，就是一個大的風景，經過控制他的定位，你就能夠看到不一樣的風景，因此，能夠先作適合大小的圖片，而後再整合到一塊兒去，經過負定位進行上移或左移，達到能讓這個窗戶顯示本身正確背景的位置。
• 以圖片左上角爲原點，整張圖片向左和向上移爲負，整張圖片向右和向下移爲正。

　　有錯誤之處，還請指正。

　　參考資料：

　　W3C CSS背景屬性

　　顯示切圖的一部分做爲背景顯示

　　CSS sprite在線工具

　　本文Demo下載:

　　模仿淘寶導航條（提取碼：e0f5）　

 

分隔線

background-position屬性

　　1.在使用關鍵字和百分比值的狀況下，設定的值同時應用於元素和背景圖片。換句話說，若是設定了33% 33%，則圖片水平33%的位置與元素水平33%的位置對齊。垂直方面也同樣。例如，background-position:center center;設定圖片中心點與元素中心點重合，而後再向各個方向重複。（把一張圖片放好，再在水平和垂直方向上重複。）

　　2.像素之類的絕對單位數值就不同了。要是用像素單位來設定位置，那麼圖片的左上角會被放在距離元素左上角指定位置的地方。

　　3.有意思的是，還可使用負值。這樣就能夠把圖片的左上角定位到元素外部，從而在元素中只能看到部分圖片。