剛剛看到一篇國外討論CSS sprites利弊的文章，作者認為那是潛在的危險，在文中也指出了他的很多觀點，這個技術我用的時間不長，不過到也還是有一些體會的，在這里也說一說自己的理解吧。

所謂CSS sprites 就是把很多張小的背景圖集中在一張大圖上，然后通過定義background-position來調(diào)用不同位置的背景圖。這個技術最大的優(yōu)點就是減少了HTTP請求，另外就是減小了圖片的大小，節(jié)省帶寬。這就是google的一張CSS sprites：

對于前者我很贊同，畢竟HTTP請求對于一個大型網(wǎng)站的性能來說，是很重要的參數(shù)，如果十幾張圖片集中在一個CSS sprites圖片上，那將是節(jié)省很多的。但是對于后者，我覺得效果是微乎其微的，很多張零碎的圖片組合在一起，確實可以降低圖片的大小，但是那是很小的。我們值得注意的是，對于相同的圖片，瀏覽器會調(diào)用緩存中的文件，所以只是在用戶空緩存狀態(tài)下瀏覽的時候才起作用，而且那還是微乎其微的，再加上目前網(wǎng)絡的帶寬狀態(tài)，那將是可以被我們所忽略的。

CSS sprites到底會不會增加我們的工作量呢？我認為，如果是一個十分龐大的css sprites那將是肯定的，不管是在編寫代碼還是在后期的維護時，都將是增加了工作量的。但是如果區(qū)域性的使用css sprites 我認為那將是有利的。

?比如使用這樣一張CSS sprites圖片，用來做自適應寬度，帶有劃過效果的按鈕，就是很好的選擇。如果不使用這個技術，這將會是四張圖片，而且很零碎不容易管理。如果我們要調(diào)整圖片的顏色，就需要對應著去找，很不方便。做在一張圖片上，我們就可以輕松的更改了，當然，我們可以保留這個CSS sprites的PSD文件，那樣更改起來就更加輕松了，同時HTTP請求也縮減到了四分之一呢。

所以我認為像這種局部的應用是很有必要的。但是那種特別大的CSS sprites就不太提倡了。

稍后我們將介紹如果制作這樣的按鈕。

?

?