css 圖片替換步驟

CSS壓縮和圖片的優化是網站優化過程中很重要的一環，如果我們可以將多個小圖片合成成一張大圖，可以減少HTTP請求，這對于移動端的用戶來說尤其有效。

1. 首先，我們需要將所有小圖片合成一張大圖。可以使用工具如SpriteGen在線生成或使用CSS Sprites生成器插件自動生成CSS Sprites

/*自動生成CSS Sprites代碼*/
.icon1{background-image:url(images/sprites.png); background-position:0px 0px; width: 59px; height: 49px; }
.icon2{background-image:url(images/sprites.png); background-position:0px -50px; width: 49px; height: 49px; }
.icon3{background-image:url(images/sprites.png); background-position:0px -100px; width: 53px; height: 49px; }

2. 接下來，我們需要用CSS代碼將原來每一個小圖片的URL替換成新合成的大圖片的URL，再通過background-position來選擇對應的小圖。

/*將原來的圖片替換成新合成的圖片*/
.icon1{background-image:url(images/sprites.png); background-position:0px 0px; width: 59px; height: 49px; }
.icon2{background-image:url(images/sprites.png); background-position:0px -50px; width: 49px; height: 49px; }
.icon3{background-image:url(images/sprites.png); background-position:0px -100px; width: 53px; height: 49px; }

3. 最后，我們需要在HTML代碼中將原來的img標簽替換成對應的CSS類名即可。