CSSSprites(CSS圖像拼合技術(shù))教程、工具集合

1、CSS Sprites(CSS圖像拼合技術(shù))教程、工具集合2009年05月20日 | 暴風(fēng)彬彬 上一篇： HYPERLINK http:/ Web UI 設(shè)計(jì)(網(wǎng)頁設(shè)計(jì))命名規(guī)范 下一篇： HYPERLINK http:/ 展示:大學(xué)時(shí)期做的第一個(gè)xHTML+CSS項(xiàng)目 今天彬Go將向大家推薦目前為止最全的CSS Sprites( HYPERLINK http:/ CSS圖像拼合技術(shù))技巧、工具和教程集合，該集合是有一位國外設(shè)計(jì)師收集整合，并由 oncoding翻譯成中文的，感謝他們的辛苦貢獻(xiàn)。CSS Sprites技術(shù)在國外并不是什么新技術(shù)，只不過近兩年(尤其08年開始)中國開始流行這個(gè)詞，

2、大家也開始越來越關(guān)注CSS Sprites這個(gè)沒有標(biāo)準(zhǔn)中文翻譯的技術(shù)。CSS Sprites這個(gè)詞如果直譯的話是”CSS精靈”的意思，它顯然無法表達(dá)其技術(shù)的內(nèi)涵。通常我們把它叫做CSS圖像拼合技術(shù),當(dāng)然還有人把CSS Sprites叫做”CSS貼圖定位”。無論怎么叫，它的技術(shù)核心是不變的，下面讓我們來了解一下這篇CSS Sprites(CSS圖像拼合技術(shù))技巧、工具和教程集合吧。您還可以參考以下JavaScript/CSS相關(guān)教程及資源: HYPERLINK http:/ o 點(diǎn)擊該標(biāo)題查看 43個(gè)實(shí)例xHTML+CSS(DIV+CSS)網(wǎng)頁及導(dǎo)航布局教程 43個(gè)實(shí)例xHTML+CSS(DIV

3、+CSS)網(wǎng)頁及導(dǎo)航布局教程 HYPERLINK http:/ o 點(diǎn)擊該標(biāo)題查看 30個(gè)基于CSS的導(dǎo)航和按鈕優(yōu)秀設(shè)計(jì)教程 30個(gè)基于CSS的導(dǎo)航和按鈕優(yōu)秀設(shè)計(jì)教程 HYPERLINK http:/ o 點(diǎn)擊該標(biāo)題查看 2008年最佳Web設(shè)計(jì)/前端開發(fā)技巧、腳本及資源總結(jié) 2008年最佳Web設(shè)計(jì)/前端開發(fā)技巧、腳本及資源總結(jié) HYPERLINK http:/ o 點(diǎn)擊該標(biāo)題查看 使用CSS為圖片添加更多趣味的5種方法 使用CSS為圖片添加更多趣味的5種方法 HYPERLINK http:/ o 點(diǎn)擊該標(biāo)題查看 精選30個(gè)優(yōu)秀的CSS技術(shù)和實(shí)例 精選30個(gè)優(yōu)秀的CSS技術(shù)和實(shí)例什么是CSS

4、 Sprites？“Sprite”(精靈)這個(gè)詞在計(jì)算機(jī)圖形學(xué)中有它獨(dú)特的定義，由于游戲、視頻等畫質(zhì)越來越高，必須有一種技術(shù)可以智能的處理材質(zhì)和貼圖，并且要 同時(shí)保持畫面流暢?！癝prite”就是這樣一種技術(shù)，它將許多圖片組合到一個(gè)網(wǎng)格上，然后通過程序?qū)⒚總€(gè)網(wǎng)格的內(nèi)容定位到畫面上。Sprite被定位到一副靜態(tài)圖片上，并且通過簡單的程序或硬件即可正確定位到畫面上，一幅幅圖片就像是被“變”出來的，他們并沒有單獨(dú)占用內(nèi)存，所以被取名為“Sprite精靈”。上圖是口袋妖怪的組合圖片，可以 HYPERLINK http:/gmc.yoyog/lofiversion/index.php/t307986.h

5、tml 點(diǎn)這里欣賞更多。不是加載每個(gè)但以圖片時(shí)間進(jìn)行到2000年，Web設(shè)計(jì)向著精致、巧妙的方向發(fā)展。設(shè)計(jì)師們開始考慮使用非Javascript的方 式制作鼠標(biāo)滑過、懸停菜單的效果，這時(shí)CSS Sprite應(yīng)運(yùn)而生，它基于同上文提到的游戲Sprite同樣的原理，并且使用CSS更容易控制，很快的流行開來。2004年，Dave Shea 提出了一種使用 HYPERLINK http:/ CSS控制組合圖片的 HYPERLINK http:/ 方案 ，將許過小的圖片組合在一起，使用css定義背景屬性，來控制圖片的顯示位置和方式。當(dāng)頁面加載時(shí)，不是加載每個(gè)單獨(dú)圖片，而是一次加載整個(gè)組合圖片。這是一個(gè)了

6、不起的改進(jìn)，它大大減少了HTTP請求的次數(shù)，減輕服務(wù)器壓力，同時(shí)縮短了懸停加載圖片所需要的時(shí)間延遲，使效果更流暢，不會停頓。CSS Sprites用在哪里？CSS Sprites可以用在很多場合，大型網(wǎng)站可以將許多單獨(dú)的圖片，以有機(jī)的方式組合起來，從而使其便于維護(hù)和更新。圖片之間通常會留出較大的空白，使 得圖片不會影響網(wǎng)頁的內(nèi)容。但同時(shí)CSS Sprite大多使用于較固定的像素定位中，它的彈性較差，收到定位等因素的制約。所以，你需要在可維護(hù)性vs降低負(fù)載之間權(quán)衡利弊，選擇最適合你的項(xiàng)目 的方式。下面是一些CSS Sprites的使用范例： HYPERLINK http:/www.xing.de

7、/ Xing這個(gè)網(wǎng)站將一些按鈕、圖標(biāo)以及LOGO做成了CSS Sprites： HYPERLINK http:/www.amazo/ Amazon亞馬遜使用的大幅、整齊巧妙的CSS Sprites： HYPERLINK http:/ Apple蘋果網(wǎng)站使用CSS Sprites來制作導(dǎo)航菜單的鼠標(biāo)懸停效果： HYPERLINK http:/www.youtu/ YouTubeYouTube使用了一個(gè)2008像素高的CSS Sprites： HYPERLINK / CNNCNN使用了非常簡單謹(jǐn)慎的方案： HYPERLINK / DiggDigg的方案比較復(fù)雜： HYPERLINK http:/

8、YahooYahoo將他們漂亮的圖標(biāo)等距離排布起來： HYPERLINK http:/www.googl/ GoogleGoogle使用了極其簡化的方案： HYPERLINK http:/dragoninteracti/ Dragon Interactive一個(gè)豐富多彩的CSS Sprites方案： HYPERLINK http:/tv1.rtp.pt/noticias/index.php TV1.rtp.pt一個(gè)很大很酷的CSS Sprites方案CSS Sprites常用來合并頻繁使用的圖形元素，如導(dǎo)航、LOGO、分割線、RSS圖標(biāo)、按鈕等。通常它們不會作為網(wǎng)頁內(nèi)容出現(xiàn)，因?yàn)樯婕皟?nèi)容的圖片

9、并不是每個(gè)頁面都一樣。關(guān)于CSS Sprites的文章 HYPERLINK http:/ CSS Sprites: Image Slicings Kiss of Death中文版: HYPERLINK http:/www.liqui/post/my_view_on_css_sprites.html o Permanent Link to 樣式表貼圖定位（CSS Sprites）：圖像切片的死亡之吻 樣式表貼圖定位（CSS Sprites）：圖像切片的死亡之吻 最權(quán)威的CSS Sprites介紹文章之一 HYPERLINK http:/css-trick/css-sprites/ o What

10、They Are, Why Theyre Cool, and How To Use Them CSS Sprites: What They Are, Why Theyre Cool And How To Use Them一篇圖文并茂的介紹文章 HYPERLINK http:/www.websiteoptimiza/speed/tweak/css-sprites/ How Y and AOL.com Improve Web Performance With CSS Sprites介紹Yahoo、AOL等網(wǎng)站使用CSS Sprites降低服務(wù)器壓力的案例。 HYPERLINK http:/www.

11、peach/articles/article.aspx?p=447210 What Are CSS Sprites?又一篇介紹文章 HYPERLINK http:/mezzo/archives/2009/01/27/sprite_optim/ o Permanent link for this article Sprite OptimizationDave Shea的思考：是不是真的有必要簡歷復(fù)雜的大型CSS Sprites？答案是不！不要搞得太復(fù)雜，找到一個(gè)折中的方案才是正道。 HYPERLINK http:/cssgl/post/3028/creating-easy-and-useful-

12、css-sprites Creating Easy and Useful CSS Sprites一篇教程，其源文件可下載學(xué)習(xí) HYPERLINK http:/ Fast Rollovers Without Preload一個(gè)快速翻轉(zhuǎn)效果的例子 HYPERLINK http:/cssgl/post/3714/css-sprites-rounded-corners/ CSS Sprites + Rounded corners另一個(gè)例子：使用CSS Sprites實(shí)現(xiàn)背景圓角 HYPERLINK http:/websitetip/articles/css/sprites/ CSS Image Spr

13、ites一篇教程 HYPERLINK http:/www.itnew/archive/Optimize-Your-Web-Site-by-Using-CSS-Image-Sprites Optimize Your Website Using CSS Image Sprites非常詳細(xì)的教程，介紹了CSS Sprites的原理和應(yīng)用方法。 HYPERLINK http:/ o Animated GIF For CSS Sprites Animated GIF For CSS Sprites一個(gè)比較特別的應(yīng)用 HYPERLINK http:/stylemeltd/2007/10/22/image-

14、sprite-navigation-with-css/ Image Sprite Navigation With CSS怎樣制作簡單的懸停菜單效果 HYPERLINK http:/ Advanced CSS Menu還是懸停效果 HYPERLINK /css-sprites Creating and Using CSS Sprites一個(gè)非?；镜慕坛藽SS Sprites視頻教程 HYPERLINK http:/www.from-the- How to Use CSS SpritesDavid Perel解釋了CSS Sprites的基本概念，并演示

15、了如何在網(wǎng)頁中使用它，長度：10分鐘 HYPERLINK http:/www.from-the- Creating Rounded Buttons With CSS Sprites繼續(xù)上面的教程，展示了如何制作滑動(dòng)按鈕 HYPERLINK http:/nettu/videos/screencasts/exactly-how-to-use-css-sprites/ Exactly How to Use CSS SpritesAndres Fernandez 展示了 CSS sprites如何加快加載時(shí)間和減少請求次數(shù) HYPERLINK http:/css-trick/video-screenc

16、asts/43-how-to-use-css-sprites/ How To Use CSS SpritesChris Coyier 展示了一個(gè) CSS sprites的范例，他將8幅圖片組合在了一起，并且使用jQuery制作了一個(gè)小程序。 HYPERLINK http:/borkw/story/fasterloads-with-image-concatenation Faster Page Loads With Image Concatenation對于復(fù)雜的網(wǎng)站，減少圖片請求數(shù)量可以減輕服務(wù)器負(fù)擔(dān)，這是許多站長所希望看到的。 HYPERLINK http:/ CSS Image Sprit

17、es In 10 Minutes另一個(gè)關(guān)于導(dǎo)航菜單的教程 HYPERLINK http:/www.sitep/blogs/2007/07/05/css-using-percentages-in-background-image/ CSS: Using Percentages in Background-Image介紹背景圖片定位的方法利用CSS Sprites制作圖像映射(image maps)使用CSS Sprites，你可以對一個(gè)對象的一小部分加載翻轉(zhuǎn)效果，使用負(fù)值的背景圖片位置( background-position )，你可以創(chuàng)建基于CSS的圖像映射，下面的文章講述了這一技術(shù)： HY

18、PERLINK http:/lab.fatag/css-sprites/ CSS Image Maps Using Sprites一個(gè)基于CSS的圖像映射的簡單例子。你可以同 HYPERLINK http:/www.cssplay.co.uk/menu/imap.html 傳統(tǒng)的方式對比一下優(yōu)劣。 HYPERLINK http:/ City Guide Map Using Sprites另一個(gè)橫向定位的例子 HYPERLINK http:/ Advanced Map Using Sprites一個(gè)更高級的技術(shù)。CSS Sprites技術(shù) HYPERLINK http:/ CSS Sprites

19、 2Dave Shea 使用jQuery擴(kuò)展了經(jīng)典的CSS Sprites， 他的技術(shù)可以讓不同的鏈接之間使用組合圖片，即使用戶禁用了Javascript。 HYPERLINK http:/www.newmediacampaig/page/css-sprites2-refactored-building-an-unobtrusive-jquery-plugin CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-InJoel Sutherland 制作的jQuery插件，整理了Dave Shea的功能，并簡化了初始化設(shè)置。

20、HYPERLINK http:/www.phpie/background-repeat-and-css-sprites/ Background Repeat and CSS Sprites什么情況下使用CSS Sprites HYPERLINK eractivellam/blog/archives/photoshop-script-combine-two-images-css-hover-css-sprite/ CSS Sprite: Photoshop Script Combines Two Images for CSS Hover這是一個(gè)可以導(dǎo)入Photoshop的動(dòng)作設(shè)置，可以讓你快速制

21、作翻轉(zhuǎn)按鈕的背景圖片。 HYPERLINK http:/ Extending CSS SpritingJennifer Semtner 擴(kuò)展了經(jīng)典CSS Sprites技術(shù)，并講述應(yīng)該在什么時(shí)候使用它。 HYPERLINK http:/ Sliding Doors Meets CSS Sprites滑動(dòng)門技術(shù) “ HYPERLINK http:/ Sliding Doors of CSS.” HYPERLINK http:/trevordavi/blog/tutorial/how-to-preload-images-when-you-cant-use-css-sprites/ How to P

22、reload Images When You Cant Use CSS Sprites如何處理CSS Sprites對網(wǎng)頁內(nèi)容的影響 HYPERLINK http:/www.sitep/blogs/2007/07/20/javascript-sprite-animation-using-jquery/ JavaScript Sprite Animation Using jQueryAlex Walker 結(jié)合CSS Sprites和jQuery，實(shí)現(xiàn)了“打開頁面”的效果 HYPERLINK http:/www.julienleco/blog/2007/07/4/ IE6, CSS Sprite

23、s and Alpha TransparencyJulien Lecomte 講述IE6下的透明hack問題CSS Sprite 制作工具 HYPERLINK http:/duris.ru/lang/en/ Data URI SpritesDURIS (Data URI CSS Sprites) 是一個(gè)管理網(wǎng)頁圖片的新工具，它可以最大限度的幫助你減少背景圖片的數(shù)量，減少請求數(shù)。 HYPERLINK http:/printf.ru/spritr/ Spritr一個(gè)生成CSS Sprites的簡單工具 HYPERLINK http:/www.floweringm/sprite-creator/in

24、dex.php Sprite Creator 1.0同上 HYPERLINK http:/drupa/project/sprites CSS Sprite Generator制作CSS sprites 的Drupal插件 HYPERLINK http:/ CSS Sprites Generator這個(gè)工具允許你上傳多張圖片生成CSS Sprites和CSS代碼 HYPERLINK http:/spritegen.website-performanc/ Projekt Fondue CSS Sprite Generator它具有忽略重復(fù)圖像，調(diào)整圖像精度，確定橫向和縱向偏移，指定背景色和透明度，

25、指定CSS前綴等眾多功能。 HYPERLINK http:/smartsprites.osins/ SmartSprites基于java的桌面程序你可以繼續(xù)以你自己的方式編寫CSS和使用圖像，有一個(gè)工具可以自動(dòng)為你設(shè)置CSS Sprites， HYPERLINK http:/www.tanila.de/smartsprite/index.php 這里是PHP 版本 ，它是開源的，具體可以看： HYPERLINK http:/tanila.de/smartsprite/index.php Chris Brainards Sprite Creator 1.0.附：CSS屬性background-p

26、osition(圖像背景位置)該如何設(shè)置background-position(圖像背景位置)這個(gè)屬性是CSS中非常重要的屬性。根據(jù)CSS規(guī)范，background-position屬性包含了兩個(gè)(可選的)變量：水平位置(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; 使用這個(gè)屬性，你可以定義塊級元素的背景圖像