之前做網站時大家都是把背景切成單個小圖片，要用背景的時候一個個調用，這樣頁面打開的時候，也會加載各個小圖片
而現在只要瀏覽各大知名網站，基本上都采用另外一種做法，那就是把所有圖標都集中在一張大圖里面，然后用css控制顯示那張圖片，這樣做的好處是：同時加載100張小圖片，比加載1張大圖片耗用的連接數多；在網頁上做鼠標移動動作的時候，如果需要切換圖標，如果正好網絡不好，可能就會出現白色背景的情況，而用大圖就不會；
大圖如：
要使用某一個圖片只需要在HTML中加入
<span id=”img”></span>
然后定位某個圖標的CSS代碼如：
#img {display:block;width:20px;height:20px;background:url("img/ltlogo.gif") no-repeat -40px 0;}
其中no-repeat后面的參數代表背影圖片的左上角相對當前元素左上角的坐標。
右為X軸正半軸, 下為Y軸正半軸
當前元素左上角坐標為 0,0
默認圖片的左上角正對當前元素的左上角
如果圖片想向左移 10px;background:url(images/hh.gif) no-repeat -10px 0;}
如果圖片想向上移 10px;background:url(images/hh.gif) no-repeat 0 -10px;}
如果圖片想向右移 10px;background:url(images/hh.gif) no-repeat 10px 0;}