Canvas: CSS Sprite 製造機

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

[Info] Opera 與 Webkit 使用者請注意：如果您的瀏覽器右鍵選單沒有圖片另存新檔指令，做好的圖片會存不起來。

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

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

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

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

更多東西：

水平圖片間距

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

垂直圖片間距

背景彩色

使用透明

間距彩色

使用透明

[Info] 您的瀏覽器不支援硬碟檔案讀取。

複製貼上圖片的網址，一張一張來。

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

在下方選擇檔案，檔案會被轉換成 Data URL 出現在上方的供您新增。

favicons - 來自各網站的 favicon。 wordpress: https://www.wordpress.org/favicon.ico wordpress-com: https://www.wordpress.com/favicon.ico facebook: https://www.facebook.com/favicon.ico twitter: https://twitter.com/favicon.ico anobii: https://www.anobii.com/favicon.ico flickr: https://www.flickr.com/favicon.ico netvibes: https://www.netvibes.com/favicon.ico plurk: https://www.plurk.com/favicon.ico
Mozilla 動物園 - Mozilla 程式的 Logo。 firefox: https://www.mozilla.org/images/product-firefox-50.png thunderbird: https://www.mozilla.org/images/product-thunderbird-50.png sunbird: https://www.mozilla.org/images/sunbird_logo-50.png camino: https://www.mozilla.org/images/product-camino.png fennec: https://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] 您還沒有新增任何圖片。

請在右邊的 <canvas> 元素按右鍵選另存新檔。

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

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