CSS Sprites Generator是一款CSS Sprites生成工具，用戶只需要點擊幾下鼠標就可以非常容易地生成CSS Sprites。有效提高了設(shè)計師的頁面加載效率，操作簡單方便，十分實用。

CSS Sprites Generator基本簡介

CSS Sprites Generator可為你自動地快速生成引用圖像較多的CSS樣式表，而無須手寫代碼。為設(shè)計師提高頁面加載效率提供了簡單快速的解決方案。為了讓你的網(wǎng)頁加載速度更快，你可以對你的網(wǎng)頁圖像使用CSS Sprites Generator，這意味著您不需要在您的HTML代碼中插入很多圖像，而是將它們組合成一個，然后用適當?shù)腃SS代碼顯示它們。

CSS Sprites Generator特色

通過使用CSS Spries，當您的網(wǎng)頁僅由一個組合的CSS Spries圖像加載時，您可以顯著減少dns查詢和文件查詢。

這導(dǎo)致加載速度更快，搜索引擎更喜歡加載速度快的網(wǎng)頁！

用4點軟件的小精靈生成器，你只需點擊幾下鼠標就可以輕松生成小精靈！

這個免費工具將生成組合的CSS精靈圖像和所需的CSS、HTML代碼。

您也可以將您的工作另存為項目，稍后再打開它。

也有免費的源代碼。

CSS Sprites Generator使用方法

步驟1 -添加圖像

首先，您必須添加要轉(zhuǎn)換為CSS Sprites的圖像。

只需按下“添加圖像”按鈕或從“圖像”菜單中選擇“添加”。

步驟2 -設(shè)置精靈屬性

在添加你的圖片后，你必須從左邊的列表中選擇每一張圖片，然后指定你想要的css類名稱和標簽。標簽只是幫助你識別CSS代碼中的圖像。

對于每個圖像，你添加一個新的CSS類將在CSS代碼中生成。

步驟3 -設(shè)置組合圖像和圖像占位符網(wǎng)址和文件路徑

然后你必須指定要生成的組合精靈圖像文件路徑。您可以選擇GIF、PNG和JPG圖像文件類型。

您還必須指定組合精靈圖像的網(wǎng)址，因為它將出現(xiàn)在您的網(wǎng)頁上。

此外，占位符圖像是必要的，以便CSS精靈工作。

CSS精靈生成器已經(jīng)有一個默認的占位符圖像，它將被復(fù)制到您指定的位置。

您必須指定要生成的占位符的文件路徑及其在網(wǎng)頁上的網(wǎng)址。

步驟4 -生成CSS精靈

然后，按下“生成”按鈕或從“工具”菜單中選擇“生成CSS精靈”，然后組合的精靈圖像將與CSS和HTML代碼一起生成。

小精靈生成器將生成一個組合的小精靈圖像，一個占位符圖像，一個css-sprites.html html文件和一個小精靈。

選定生成的css文件后，將打開Windows資源管理器。

步驟5 -上傳文件

然后，您必須將生成的CSS圖像子畫面圖像上傳到您的網(wǎng)頁，并將占位符圖像上傳到您的網(wǎng)頁和先前指定的位置。

第六步——編輯網(wǎng)頁的HTML、CSS代碼

最后，您必須根據(jù)生成的HTML和CSS文件來編輯您的網(wǎng)頁的HTML和CSS代碼。

必須用占位符圖像的URL替換每個圖像的源URL，并且必須向每個圖像的圖像標簽添加CSS類。在你的CSS代碼中，你必須粘貼生成的CSS代碼。