我們經常看到一個頁面上有很多小表徵圖，可是當我們用工具去開啟時卻發現
這些小表徵圖其實在一張圖片上，這是怎麼實現的呢
這當中用到了CSS Sprites切圖技術。
CSS Sprites其實就是把網頁中一些表徵圖整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
優點：減少網頁http請求，提高頁面效能，降低伺服器負載；檔案命名減少麻煩。
缺點：定位繁瑣，布局固定，降低網頁彈性。
樣本：
<html><head><meta charset="utf-8"><title>CSS sprites</title><style type="text/css">div{background-image:url(nav_logo99.png);background-repeat:no}.logo{width:120px;height:40px;background-position:-24px 0px}.play{width:28px;height:28px;background-position:-138px -41px</style></head><body><div class="logo"></div><div class="play"></div></body></html>效果如下：
這當中，定位比較繁瑣，我採用Photoshop來進行定位。
在PS中，右上方選——設計，然後點資訊，我們把滑鼠放到圖片上，便可看到像素的X與Y值，還可以用矩形工具拉出一個矩形，查看它的width與height值。
代碼中div的width和height值是你要顯示的地區的長和高，background-position：X Y的值就是滑鼠放到你要顯示的小表徵圖的左上方
的橫座標和縱座標，特別注意：有負號
另外，還可以通過%比來賦值，如上面的Google表徵圖：
background-position:50% 0%
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
