制作CSS精灵的工具？

有什么好的工具来制作css精灵吗

理想情况下，我想给它一个图像目录和一个引用这些图像的现有.css文件，让它创建一个使用所有小图像优化的大图像，并更改我的.css文件以引用这些图像

至少我希望它能获取一个图像目录，并生成一个大精灵和将每个用作背景所需的.css

---

有什么好的photoshop插件或成熟的应用程序可以做到这一点吗？

但500K的上传限制可能会让人痛苦。源代码可用

这将为您完成90%的工作：。您仍然需要自己编辑规则，但该工具将为您提供新CSS文件所需的代码片段。

如果您喜欢Java，那么您可以使用GWT 1.5+，它附带一个名为“.”的东西。GWT编译器将为您处理所有令人讨厌的细节。您甚至不必编写一行JavaScript或编写任何CSS。

不是直接的答案，而是对我的开发人员和Web集成商，考虑简单地将每个精灵对齐为两个幂；例如16像素或32像素网格。它使计算CSS文件中的偏移量变得更加容易。gifd和png格式之间的所有空白都不重要，因为它们压缩得非常好。

这看起来很有希望：

我还发现其中有一些有用的信息，甚至还有一些读者评论值得一读

---

显然google web toolkit也有一些功能，所以如果您正在使用它，它可能值得一看。它不会像你要求的那样制作精灵贴图，但如果图像大小相同，它会以两（2，4，8）的倍数组合图像。我更喜欢组合相似的图像（普通、悬停、选定、选定的父对象），而不是将所有图像放在一个文件中。

现在有史蒂夫·索德斯的《精灵我》。只是尝试一下，它似乎工作得很好

这是链接，这是宣布它的博客文章

---

如果您使用的是RubyonRails，那么有一个易于安装的库来生成css精灵

是基于Adobe AIR的应用程序，它为创建强大的CSS精灵图像提供了简单的界面。您可以指定FiledWidth和FieldHeight或对图像进行排序。

---

是我正在开发的浏览器内CSS精灵生成器。它真的很快，但没有其他一些功能那么多。它目前只在Firefox或Chrome中工作，因为它使用JavaScript文件读取器和HTML画布在web浏览器中生成精灵而无需上传。

目前还不清楚它是否能进入核心ASP.NET框架，但这里有一个针对csssprites的Microsoft codeplex项目：

如果你喜欢它-使用它-或只是喜欢的想法，然后添加评论。我认为这将是一个伟大的事情，有在ASP.NET框架。我没有亲自使用过它（我必须自己发明轮子），但它得到了很好的评价

---

它包括以下组件：

• 用于自动生成精灵和内嵌图像的API
• 控件和助手，它们提供了调用API的便捷方式

第二版中添加的功能：

• Web表单的CSS链接控件（为用户的浏览器选择适当的CSS文件，但不显示图像）
• 使用除App_精灵以外的自定义文件夹路径
• 更改精灵图像的平铺方向
• 将生成的CSS与用户自己的CSS合并

未来版本正在考虑的功能：

• 自动选择最有效的精灵背景色
• 自动缩小渲染的CSS
• 根据.NET3.5进行编译

---

有一个新工具叫做ActiveSprites，它是active\u资产gem的一部分

Github：

使用ruby dsl定义精灵，然后执行“rake精灵”，精灵和相应的样式表就会生成

是雷德

下面是一些示例代码

# 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

---

如果您正在使用.net，请签出。它不仅自动创建sprite文件，而且还通过HttpModule动态创建，并合并和缩小所有CSS。它还使用量化和无损压缩优化sprite图像，并使用etag和Expires头处理生成文件的服务，以确保最佳浏览器缓存。这个设置非常简单，只需要对web.config进行简单的更改。有关Microsoft Visual Studio和MSDN示例库对其采用的信息，请参见我的文章。

该工具采用了一种新颖的方法，它将您请求的图像作为http服务进行动态组装。这使得整个过程非常简单（无需预处理，随时更改图像）：启动服务，然后在HTML中引用所需的任何图像：

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

---

因为它是动态的，所以您甚至可以从动态图像集（如缩略图）生成精灵。虽然不支持JPEG，但PNG和GIF效果很好。

Compass CSS框架有。

我最近发现了这个工具：SpriteLight

SpriteLight是Mac的CSS spritesheet生成器，可用于导入现有图像或样式表。使您的站点加载更快，降低带宽成本并节省时间。SpriteRight甚至可以动态生成CSS代码。

我建议您使用。我自动生成精灵表，并为您导出CSS代码。它总是尝试用高级算法生成最小的精灵图纸

这是一个截图和

是一款CSS sprites生成器，旨在使用VLSI布局规划算法最小化面积。

尝试以下方法：

---

这些工具都不符合我的要求，所以我编写了一个使用马克·泰勒的微型图像库mtpixel（现在是它的一部分）的工具 它不是超级广泛，但通过mtpixel的内置功能可以轻松扩展，包括：灰度、颜色反转、旋转、锐化、量化、，

#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; 
}