CSS Sprites(CSS圖像拼合技術)教程、工具集合

本集合是有一位國外設計師收集整合，並由 oncoding翻譯成中文的，感謝他們的辛苦貢獻。CSS Sprites技術在國外並非什麼新技術，只不過近兩年(尤爲08年開始)中國開始流行這個詞，你們也開始愈來愈關注CSS Sprites這個沒有標準中文翻譯的技術。CSS Sprites這個詞若是直譯的話是」CSS精靈」的意思，它顯然沒法表達其技術的內涵。一般咱們把它叫作CSS圖像拼合技術,固然還有人把CSS Sprites叫作」CSS貼圖定位」。不管怎麼叫，它的技術核心是不變的。

您還能夠參考如下JavaScript/CSS相關教程及資源:
《43個實例xHTML+CSS(DIV+CSS)網頁及導航佈局教程》
《30個基於CSS的導航和按鈕優秀設計教程》
《2008年最佳Web設計/前端開發技巧、腳本及資源總結》
《使用CSS爲圖片添加更多趣味的5種方法》
《精選30個優秀的CSS技術和實例》

什麼是CSS Sprites？

「Sprite」(精靈)這個詞在計算機圖形學中有它獨特的定義，因爲遊戲、視頻等畫質愈來愈高，必須有一種技術能夠智能的處理材質和貼圖，而且要 同時保持畫面流暢。「Sprite」就是這樣一種技術，它將許多圖片組合到一個網格上，而後經過程序將每一個網格的內容定位到畫面上。

Sprite被定位到一副靜態圖片上，而且經過簡單的程序或硬件便可正肯定位到畫面上，一幅幅圖片就像是被「變」出來的，他們並無單獨佔用內存，因此被取名爲「Sprite精靈」。

上圖是口袋妖怪的組合圖片，能夠點這裏欣賞更多。不是加載每一個但以圖片

時間進行到2000年，Web設計向着精緻、巧妙的方向發展。設計師們開始考慮使用非Javascript的方 式製做鼠標滑過、懸停菜單的效果，這時CSS Sprite應運而生，它基於同上文提到的遊戲Sprite一樣的原理，而且使用CSS更容易控制，很快的流行開來。

2004年，Dave Shea 提出了一種使用CSS控制組合圖片的方案 ，將許太小的圖片組合在一塊兒，使用css定義背景屬性，來控制圖片的顯示位置和方式。

當頁面加載時，不是加載每一個單獨圖片，而是一次加載整個組合圖片。這是一個了不得的改進，它大大減小了HTTP請求的次數，減輕服務器壓力，同時縮短了懸停加載圖片所須要的時間延遲，使效果更流暢，不會停頓。

CSS Sprites用在哪裏？

CSS Sprites能夠用在不少場合，大型網站能夠將許多單獨的圖片，以有機的方式組合起來，從而使其便於維護和更新。圖片之間一般會留出較大的空白，使 得圖片不會影響網頁的內容。但同時CSS Sprite大多使用於較固定的像素定位中，它的彈性較差，收到定位等因素的制約。因此，你須要在可維護性vs下降負載之間權衡利弊，選擇最適合你的項目 的方式。

下面是一些CSS Sprites的使用範例：

Xing

這個網站將一些按鈕、圖標以及LOGO作成了CSS Sprites：

Amazon

亞馬遜使用的大幅、整齊巧妙的CSS Sprites：

Apple

蘋果網站使用CSS Sprites來製做導航菜單的鼠標懸停效果：

YouTube

YouTube使用了一個2008像素高的CSS Sprites：

CNN
CNN使用了很是簡單謹慎的方案：

Digg
Digg的方案比較複雜：

Yahoo
Yahoo將他們漂亮的圖標等距離排布起來：

Google
Google使用了極其簡化的方案：

Dragon Interactive

一個豐富多彩的CSS Sprites方案：

TV1.rtp.pt

一個很大很酷的CSS Sprites方案

CSS Sprites經常使用來合併頻繁使用的圖形元素，如導航、LOGO、分割線、RSS圖標、按鈕等。一般它們不會做爲網頁內容出現，由於涉及內容的圖片並非每一個頁面都同樣。

關於CSS Sprites的文章

CSS Sprites: Image Slicing’s Kiss of Death

中文版:樣式表貼圖定位（CSS Sprites）：圖像切片的死亡之吻

最權威的CSS Sprites介紹文章之一

CSS Sprites: What They Are, Why They’re Cool And How To Use Them
一篇圖文並茂的介紹文章

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites

介紹Yahoo、AOL等網站使用CSS Sprites下降服務器壓力的案例。

What Are CSS Sprites?
又一篇介紹文章

Sprite Optimization

Dave Shea的思考：是否是真的有必要簡歷複雜的大型CSS Sprites？答案是不！不要搞得太複雜，找到一個折中的方案纔是正道。

Creating Easy and Useful CSS Sprites

一篇教程，其源文件可下載學習

Fast Rollovers Without Preload

一個快速翻轉效果的例子

CSS Sprites + Rounded corners

另外一個例子：使用CSS Sprites實現背景圓角

CSS Image Sprites

一篇教程

Optimize Your Website Using CSS Image Sprites

很是詳細的教程，介紹了CSS Sprites的原理和應用方法。

Animated GIF For CSS Sprites

一個比較特別的應用

Image Sprite Navigation With CSS

怎樣製做簡單的懸停菜單效果

Advanced CSS Menu

仍是懸停效果

Creating and Using CSS Sprites

一個很是基本的教程

CSS Sprites視頻教程

How to Use CSS Sprites
David Perel解釋了CSS Sprites的基本概念，並演示瞭如何在網頁中使用它，長度：10分鐘

Creating Rounded Buttons With CSS Sprites
繼續上面的教程，展現瞭如何製做滑動按鈕

Exactly How to Use CSS Sprites
Andres Fernandez  展現了 CSS sprites如何加快加載時間和減小請求次數

How To Use CSS Sprites
Chris Coyier 展現了一個 CSS sprites的範例，他將8幅圖片組合在了一塊兒，而且使用jQuery製做了一個小程序。

Faster Page Loads With Image Concatenation
對於複雜的網站，減小圖片請求數量能夠減輕服務器負擔，這是許多站長所但願看到的。

CSS Image Sprites In 10 Minutes
另外一個關於導航菜單的教程

CSS: Using Percentages in Background-Image
介紹背景圖片定位的方法

利用CSS Sprites製做圖像映射(image maps)

使用CSS Sprites，你能夠對一個對象的一小部分加載翻轉效果，使用負值的背景圖片位置( background-position )，你能夠建立基於CSS的圖像映射，下面的文章講述了這一技術：

CSS Image Maps Using Sprites

一個基於CSS的圖像映射的簡單例子。你能夠同傳統的方式對比一下優劣。

City Guide Map Using Sprites
另外一個橫向定位的例子

Advanced Map Using Sprites
一個更高級的技術。

CSS Sprites技術

CSS Sprites 2

Dave Shea 使用jQuery擴展了經典的CSS Sprites， 他的技術可讓不一樣的連接之間使用組合圖片，即便用戶禁用了Javascript。

CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-In
Joel Sutherland 製做的jQuery插件，整理了Dave Shea的功能，並簡化了初始化設置。

Background Repeat and CSS Sprites

什麼狀況下使用CSS Sprites

CSS Sprite: Photoshop Script Combines Two Images for CSS Hover
這是一個能夠導入Photoshop的動做設置，可讓你快速製做翻轉按鈕的背景圖片。

Extending CSS Spriting
Jennifer Semtner 擴展了經典CSS Sprites技術，並講述應該在何時使用它。

Sliding Doors Meets CSS Sprites
滑動門技術 「Sliding Doors of CSS.」

How to Preload Images When You Can’t Use CSS Sprites
如何處理CSS Sprites對網頁內容的影響

JavaScript Sprite Animation Using jQuery
Alex Walker 結合CSS Sprites和jQuery，實現了「打開頁面」的效果

IE6, CSS Sprites and Alpha Transparency
Julien Lecomte 講述IE6下的透明hack問題

CSS Sprite 製做工具

Data URI Sprites

DURIS (Data URI [CSS] Sprites) 是一個管理網頁圖片的新工具，它能夠最大限度的幫助你減小背景圖片的數量，減小請求數。

Spritr
一個生成CSS Sprites的簡單工具

Sprite Creator 1.0
同上

CSS Sprite Generator
製做CSS sprites 的Drupal插件

CSS Sprites Generator
這個工具容許你上傳多張圖片生成CSS Sprites和CSS代碼

Projekt Fondue CSS Sprite Generator
它具備忽略重複圖像，調整圖像精度，肯定橫向和縱向偏移，指定背景色和透明度，指定CSS前綴等衆多功能。

SmartSprites
基於java的桌面程序

你能夠繼續以你本身的方式編寫CSS和使用圖像，有一個工具能夠自動爲你設置CSS Sprites，這裏是PHP 版本 ，它是開源的，具體能夠看： Chris Brainard’s Sprite Creator 1.0.
附：CSS屬性background-position(圖像背景位置)該如何設置

background-position(圖像背景位置)這個屬性是CSS中很是重要的屬性。

根據CSS規範，background-position屬性包含了兩個(可選的)變量：水平位置(horizontal)和垂直位置(vertical)，例如：

1. .introduction {
2.     background-image: url(bg.gif);
3.     background-position: [horizontal position] [vertical position];
4.     }

.introduction {         background-image: url(bg.gif);         background-position: [horizontal position] [vertical position];         }

使用這個屬性，你能夠定義塊級元素的背景圖像位置，可使用%百分比或px像素爲單位來定義圖像開始的位置，也可使用關鍵字：top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

在「 background-position: x% y%;  」這樣一個語句中，x%指水平偏移，y%指垂直偏移，左上角是：0%,0%，右下角是：100%,100%，默認的是50%。

例如，你能夠這樣定義：

1. ul li {
2.     background-image: url(bg.gif);
3.     background-position: 19px 85px;
4.     },

這樣背景圖片就被定位到了距離左側19像素，距離上邊85像素。

關於這個屬性，能夠在這裏找到更詳細的資料：background-position (CSS property) 。

ps:感謝彬GO