工具，使CSS的精灵？
有没有什么好的工具来制作CSS精灵？
理想情况下，我想给它一个图像的目录和一个现有的.css文件引用这些图像，并创build一个大的图像优化所有的小图像，并改变我的.css文件引用这些图像。
至less我想它需要一个图像的目录，并生成一个大的精灵和.css需要使用每个作为背景。
有没有好的Photoshop插件或完全吹嘘的应用程序来做到这一点？
这将为你做90％的工作： http : //spritegen.website-performance.org/ 。 您仍然需要自己编辑规则，但该工具会为您提供新CSS文件所需的代码片段。
即时精灵是我正在处理的浏览器中的CSS精灵生成器。 这真的很快，但没有其他一些function那么多。 它目前只适用于Firefox或Chrome，因为它使用JavaScript FileReader和HTML Canvas在Web浏览器内生成精灵而不需要上传。
Steve Souders现在有Sprite Me。 试试看，它似乎工作得很好。
这看起来很有希望
另外我发现这篇文章里面有一些有用的信息，甚至有些读者的评论值得一读。
也显然谷歌networking工具包有一些东西 – 所以如果你使用，这可能是值得一试。
ZeroSprites是一个CSS sprites生成器，旨在使用VLSI floorplaningalgorithm进行面积最小化。
发现这一个相当快速的 500K上传限制可能是一个痛苦。 源代码在这里可用
Tonttu是基于Adobe AIR的应用程序，它为创build强大的CSS Sprites图像提供了简单的界面。 您可以指定FiledWidth和FieldHeight或sorting图像。
用Tonttu桌面工具创buildCSS Sprites图像
还不清楚，如果它将成为核心的ASP.NET框架，但这里是一个微软的csssprites的codeplex项目：
http://aspnet.codeplex.com/releases/view/50869
如果你喜欢它 – 使用它 – 或者就像这个想法然后添加评论。 我认为这将是一个伟大的事情，在ASP.NET框架。 没有亲自使用它（我必须自己发明轮子），但是它得到了很好的评价。
它包括以下组件：
- 用于自动生成精灵和内联图像的API
- 控件和帮助程序提供了调用API的方便方法
第二版中增加的function：
- Web窗体的CSS链接控件（为用户的浏览器select适当的CSS文件，但不显示图像）
- 使用除App_Sprites之外的自定义文件夹path
- 更改精灵图像的平铺方向
- 将生成的CSS与用户自己的CSS合并
未来版本考虑的function：
- 自动select最有效的精灵背景颜色
- 自动缩小呈现的CSS
- 用.NET 3.5编译
只要使用http://sprites.scherpontwikkeling.nl/它也可以从网站URL生成精灵;…你可以在开发你的网站后整合你的精灵。 这是非常容易使用;）
不是一个直接的答案，而是我的开发人员和networking集成商，考虑简单地调整每个精灵的权力两个; 例如16像素或32像素网格。 这使得在CSS文件中计算偏移更容易。 gifd和png格式压缩得非常好，所有的空白都不重要。
指南针CSS框架自动生成雪碧 。
如果你喜欢Java，那么你可以使用GWT 1.5+，它带有一些名为“ ImageBundle ”的东西。 GWT编译器将为您处理所有令人讨厌的细节。 你甚至不需要编写一行JavaScript代码或写任何CSS。
这是一个脚本， 通过Photoshop脚本将图像合并到CSS sprites中 。 它不会像你问的那样做一个精灵图，但是如果它们是相同的大小，它将把图像合并成两个（2,4,8）的倍数。 我喜欢结合相似的图像（正常，hover，select，select的父母）比在一个文件中的所有图像。
如果你在轨道上使用ruby，有一个容易安装库来生成CSS精灵。
那里有一个叫ActiveSprites的新工具，它是active_assets gem的一部分。
Github： http : //bitly.com/eRTwU4
你使用一个rubydsl来定义你的精灵，然后做“rake精灵”，精灵和相应的样式表会被生成。
这是rad！
这是一些示例代码，
# config/sprites.rb Rails.application.sprites do sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do _'sprite_images/sprite1/1.png' => 'a.one' _'sprite_images/sprite1/2.png' => 'span.two' end end https://github.com/northpoint/SpeedySprite
这个工具采取了一种新颖的方法，即以HTTP服务的forms组装您的请求图像。 这使整个过程非常简单（无需预处理，随时更改图像）：启动该服务，然后在HTML中引用任何想要的图像：
<link href="css/my-images-dir/" rel="stylesheet"> <div class="my-image-name-here" />
因为它是dynamic的，你甚至可以从一组dynamic的图像，如缩略图页面制作精灵。 虽然不支持JPEG，但PNG和GIF工作正常。
我build议你使用Sprite Master Web 。 我自动生成精灵画面并为您导出CSS代码。 它总是试图用高级algorithm生成最小的精灵表。
这是一个截图和youtubevideo
所有这些工具都不符合我的要求，所以我写了一个使用Mark Tylers的小图像库mtpixel（现在是mtcelledit的一部分）。它不是超级广泛的，但它可以通过mtpixel构build的函数轻松扩展，包括：灰度，颜色反转，旋转，锐化，量化，后置，翻转（垂直和水平），变换，RGB – >索引，索引 – > RGB，边缘检测，浮雕，绘制多边形，文本和更多。
所有你要做的就是将一组图像传递给args（支持png，gif和jpeg），并且将输出一个叫做sprite.png的rgb png以及有用的图像切片数据到stdout。 我在bash脚本中使用它来精炼图像的整个目录，并输出切片数据以自动生成css（希望最终能够用一些创造性的sed / awk自动replace现有的img标签）
小狗Linux的二进制包将在这里：
http://murga-linux.com/puppy/viewtopic.php?t=82009
我的用例只需要垂直拼接图像到一个新的PNG，所以这是所有的，但我的源代码是公共领域和mtcelledit库是gpl3。 与mtpixel静态链接，二进制是<100kb（dynamic链接时只有几kb）和唯一的其他依赖libpng，libjpeg和libgif（和官方mtpixel freetype，但我不需要文本的支持，所以我注释掉静态构build中的freetype位）
随时修改您的需要：
#include <stdlib.h> #include <stdio.h> #include <string.h> #include <mtpixel.h> int main( int argc, char *argv[] ){ int i=0,height=0,width=0,y=0; mtpixel_init(); mtImage *imglist[argc]; argc--; do{ imglist[i] = mtpixel_image_load( argv[i+1] ); height+=imglist[i]->height; if (imglist[i]->width > width) width=imglist[i]->width; } while (++i < argc); imglist[argc]=mtpixel_image_new_rgb(width,height); imglist[argc]->palette.trans=0; i=0; do{ if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); y+=imglist[i]->height; mtpixel_image_destroy( imglist[i] ); }while (++i < argc); mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); mtpixel_quit(); return 0; }
如果您使用.net，请查看http://www.RequestReduce.com 。 它不仅自动创build了精灵文件，而且通过一个HttpModule通过合并和缩小所有的CSS来完成。 它还使用量化和无损压缩优化精灵图像，并使用ETags和Expires头来处理生成的文件的服务，以确保最佳的浏览器caching。 这个设置很简单，只需要一个简单的web.config更改。 请参阅我的博客文章，了解Microsoft Visual Studio和MSDN示例库的采用情况。
我最近find这个工具：SpriteRight http://spriterightapp.com/
SpriteRight是Mac的CSS spritesheet生成器，可让您导入现有的图像或样式表。 使您的网站加载速度更快，降低带宽成本并节省时间。 SpriteRight甚至可以即时生成CSS代码。
