Canvas: CSS Sprite 製造機

使用 `<canvas>` 製作您的 CSS Sprite。

[Info] Opera 與 Webkit 使用者請注意：您可以玩玩看此工具，但是因為右鍵選單沒有圖片另存新檔指令，所以做好的圖片存不起來。

此工具使用瀏覽器的 <canvas> 支援製作 CSS Sprite。身為一個 Web Designer/Developer，如果您的瀏覽器還不支援 canvas 的話，您還是快換工作吧。

更多關於 CSS Sprite 的資訊可以參考這篇文章（英文）。

此工具會即時產生結果。歡迎在各分頁間來回瀏覽，重複調整。

此工具由 timdream 製作。有任何意見歡迎留言或與我聯絡。

Flickr 照片作者：Kelsey Shay，依照 CC-by-sa-2.0 授權使用。

水平圖片間距

px 如果您要將圖片用在此工具提供的 CSS 原始碼以外的用途的話，請確定水平間距夠大，以免遇到 Safari 的圖片重複 bug。

垂直圖片間距

背景彩色

使用透明

間距彩色

使用透明

複製貼上圖片的網址，一個一個來。因為安全限制，您無法使用硬碟內的本地端圖片。

將網址貼在下面的文字方塊，使用此格式：
my-class: http://.../。

favicons - 來自各網站的 favicon。 wordpress: http://www.wordpress.org/favicon.ico wordpress-com: http://www.wordpress.com/favicon.ico facebook: http://www.facebook.com/favicon.ico twitter: http://twitter.com/favicon.ico anobii: http://www.anobii.com/favicon.ico flickr: http://www.flickr.com/favicon.ico netvibes: http://www.netvibes.com/favicon.ico plurk: http://www.plurk.com/favicon.ico
Mozilla 動物園 - Mozilla 程式的 Logo。 firefox: http://www.mozilla.org/images/product-firefox-50.png thunderbird: http://www.mozilla.org/images/product-thunderbird-50.png sunbird: http://www.mozilla.org/images/sunbird_logo-50.png camino: http://www.mozilla.org/images/product-camino.png fennec: http://www.mozilla.org/images/fennec.png
Data URL - 使用 data: 網址新增圖片。 red-dot: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg== check: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC

[Alert] 您還沒有新增任何圖片。

[Alert] 您還沒有新增任何圖片。

Firefox 使用者可以對右邊的 <canvas> 元素按右鍵存檔。

使用這塊 CSS 來用 class 替代圖片，像這樣 <span class="sprite my-class">my icon</span>

存這塊文字下次就可以重新產生圖片（貼到「貪心點兒」那塊）。