DIV+CSS背景一張整圖(css sprites)

　　以前看到很多大型網站，整個網站的背景圖片，是同一張圖片，下載他的背景圖片，看到一張圖片上有很多小表徵圖。

　　也就是國外很流行的css sprites，目前國內也有很多網站這樣用。

　　這次在寫CSS+DIV時，也這樣寫了個整站，感覺雖然做網站的整站慢，但在網站的佔用資源上，的確省了不少。

　　原理，一般網站的圖片都是分開的，每個圖片的調用都會佔用一個IIS連結，而現在把所有圖片放在一張圖上時，所有圖片都是一個圖片，只要調用一次圖片，就可以提供整個網頁的圖片用，這樣只佔一個IIS連結。

　　在製作過程用，就是把所有的圖片，都用背景來實現，比如一個小表徵圖，就用<b class="exp"></b>這顯示，把exp的樣式設定一個背景，背景就是一個圖片。

如：

 .exp

{

background-image: url(bg.gif);/*背景圖片*/

background-repeat: no-repeat;/*不平鋪*/

background-position: -300px -50px;/*設定背景圖片在整個圖的位置，在前面加個負號*/

width=25px;/*寬度*/

height=25px;/*高度*/

}

　　看到上面的吧，在設定背景時，會指定背景在圖片上的位置，然後控制寬度和高度的大小，這樣就顯示了一個表徵圖了，同樣的方法，把網站所有的介面圖片都以這樣的方法顯示，每個圖上都是取大圖中的一小部分。

　　每個小表徵圖在大圖片中的位置，可以在PS裡用線查看。