CSS background-position用法

相信不少喜歡研究網頁界面的童鞋都遇到過一個奇妙的現象：網頁中不少圖片素材被合成在一張圖片上。

       起初小菜模仿網站的時候，常常遇到這個現象，那時候也不知道這時什麼技術，人家的整張圖片素材不會利用，只能用ps切圖，切成單個的再用。。。

       其實，這是一個很是簡單的技術，就是由於想象的太難了，才一直找不到問題的關鍵。

       要想實現CSS摳圖，只須要用到一個屬性：background-position。

       按照字面理解，這個屬性就是背景定位，先看看google網站的素材圖，以下：

       假如小菜如今想作一個+1按鈕，利用上邊的素材圖，普通狀態顯示A圖，鼠標移上去顯示後顯示B圖，實現這麼一個動態效果。

       按鈕是用來實現功能的，通常是用超連接響應單擊事件，可是不能把背景圖直接加在超連接上，那樣就不叫樣式啦，由於超連接的文本長度變化時，樣式也變了。

       地球人通常的作法是，div裏邊套一個超連接，超連接負責實現功能，div負責裝載背景圖。html結構以下：

1 <div class="btn"> 2 <a href="http://www.kpdown.com">+1</a> 3 </div>

 

       有了html骨架，接下來就要寫css樣式啦。

       假如咱們什麼都不考慮，直接把整張圖片設爲背景，樣式以下：

1 .btn{ 2  background:url(bg.png); 3 }

 

       效果如圖：

       div是塊級元素，默認是佔一行的，這個先不用關心，但看到背景圖重複了，這顯然不是咱們想要的，加上background-repeat:no-repeat;屬性，改進樣式以下：

1 .btn{ 2  background:url(bg.png); 3  background-repeat:no-repeat; 4 }

 

       這樣就不重複了。

       div能夠理解成一個矩形框，它的左上角是頂點，背景圖片的頂點也是左上角，div加載背景圖時，會把兩個頂點重合，頂點的座標是(0,0)。不理解的看圖，很簡單的。。。

 

       +1的小圖片混雜在大圖中，想提取出來，須要用background-position屬性，這個屬性至關於大圖片不動，把div的頂點進行移動，移動到目標小圖的頂點位置，以下圖：

       這樣一來，div中顯示的就是小圖了，可是，顯示的還不只僅是小圖，而是圖中陰影部分，怎麼辦呢？設置一下div的寬、高，讓它和小圖的寬、高同樣就能夠了唄！！

       再來看看background-position屬性，它有兩個參數，分別是水平方向移動的像素、豎直方向移動的像素，都用負數表示。大圖不動，div移動，也只能是向右、向下移動，只要記住這兩個方向移動的像素都用負數表示就好了！

       所以，只要找到小圖相對於大圖左上角頂點的水平移動像素、豎直移動像素就能夠了。小菜也不用什麼專業工具，用截圖就很方便，從大圖左上角頂點開始截，到小圖頂點那停下來，一看像素就差很少了，而後再調試調試，基本就搞定。

       在本例中，A小圖的位移是：-25px -374px，A小圖尺寸是：24px 16px。所以，css樣式以下：

1 .btn{ 2  background:url(bg.png); 3  background-repeat:no-repeat; 4  background-position:-25px -374px; 5  height:16px; 6  width:24px; 7 }

 

        效果以下：

        這樣就算是把小圖摳出來啦！簡單吧！！

        先解釋個問題，圖片上有+1，而我又在超鏈上寫了一個+1，這是由於不少時候文本內容不是寫在圖片上的，那樣靈活性太差，文本就是文本，小菜爲了給你們一個完整的演示，所以又寫了一個+1，接下來就處理它！

        先把+1居中，居中分爲水平居中和垂直居中，水平居中超連接，須要在div上設置text-align:center;，這個屬性是對子節點而言的；垂直居中div中的超連接，只須要把a標籤的line-height屬性設成和div的高度同樣便可。樣式以下：

 1 .btn{  2  background:url(bg.png);  3  background-repeat:no-repeat;  4  background-position:-25px -374px;  5  height:16px;  6  width:24px;  7  text-align:center;  8 }  9 .btn a{ 10  line-height:16px; 11 }

 

        效果以下：

 

       接下來呢，還有問題，咱們能夠發現，只有當鼠標移到+1文本上時，鼠標纔會變成手型，才能響應事件。

       這顯然不是咱們想要的，應該是鼠標移入圖片時，確切的說是鼠標移入div時，就能夠變成手型，也能響應事件。

       這也簡單，只須要在a標籤(超連接)上加display:block;屬性便可。

       另外這個下劃線比較礙眼，用text-decoration:none;屬性去掉，很常見，就很少說了。

       樣式以下：

 1 .btn{  2  background:url(bg.png);  3  background-repeat:no-repeat;  4  background-position:-25px -374px;  5  height:16px;  6  width:24px;  7  text-align:center;  8 }  9 .btn a{ 10  line-height:16px; 11  display:block; 12  text-decoration:none; 13 }

 

       接下來就剩最後一件事了，那就是鼠標移入的時候切換背景。

       本例是div裏邊套a標籤，鼠標移入換背景，固然是指鼠標移入div，並且換背景也是換div的背景，可不是a標籤的哦！！

       所以要在div標籤上調用hover，div的樣式是btn，所以寫成.btn:hover{}。

       換背景還須要找到背景圖片，這又須要摳小圖了，也就是摳上邊指出的B圖。

       剛剛顯示的是A小圖，B小圖和A小圖在同一水平線上，所以豎直方向的移動像素是相同的，水平方向差不就是A小圖的水平像素加上A小圖的寬度。

       通過測試，B小圖的位移是：-50px -374px，尺寸大小就不用關心了，確定和A小圖同樣，不同就無法作了。

       把B小圖的定位background-position:-50px -374px;放在.btn:hover{}裏便可。

       樣式以下：

 1 .btn{  2  background:url(bg.png);  3  background-repeat:no-repeat;  4  background-position:-25px -374px;  5  height:16px;  6  width:24px;  7  text-align:center;  8 }  9 .btn a{ 10  line-height:16px; 11  display:block; 12  text-decoration:none; 13 } 14 .btn:hover{ 15  background-position:-50px -374px; 16 }

 

        最終效果-鼠標移入以前：

   

        最終效果-鼠標移入以後：

 

       好啦，教程到這就結束了，小菜只是簡單的演示了一個完整的製做流程，中間還有不少細節問題，好比瀏覽器兼容、CSS優化等等，這就須要讀者本身探索了。

       其實小菜一直在說的CSS摳圖，真正的技術名叫CSS Sprite技術，國人習慣叫CSS精靈。

       這種技術有好處也有壞處，好處是因爲圖片都放在一塊兒，請求時只需請求一張圖片，減小了與服務器的交互次數，還能夠解決hover延遲加載的問題。壞處就是很差控制，擴展性不太好，之後有改動，可謂是牽一髮而動全身，並且有時會由於屏幕分辨率不一樣出現背景斷裂現象。