是否有一个CSS sprite生成器也能提供视网膜变换？

Question

如果已经没有一个，我非常感谢，如果有人可以给我一些关于如何制作视网膜和非视网膜CSS-sprite的指示。如果可能，最好在过程中使用一些CSS sprite -generator。

相关主题：http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

谢谢大家提前！

Answer 1

方法1

Here's a Mixin与Compass

方法2

1. 视网膜屏幕创建两个版本的图像文件，一个是 “正规” 密度屏幕，其他实现这一目标，分辨率是图片的两倍。 （如果图片中的一个由41像素23像素含义，视网膜版本将由28 PX 46px）
2. 转到http://spritegen.website-performance.org/并创建子画面图像的两个版本。让我们假设您的图片尺寸小于25像素。在第一个非视网膜版本中选择水平偏移：25px，在视网膜版本中选择50px。保存你的精灵作为sprite.png和spritex2.png

3. 在你的CSS文件，你现在可以沿的线条粗犷定义的东西：

   .#spriteA,spriteB{ 
       background-image: url(sprite.png); 
       width:25px; 
       height:25px; 
   }   
   
   @media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
   only screen and (min--moz-device-pixel-ratio: 1.5), 
   only screen and (min-resolution: 240dpi) { 
   .#spriteA,spriteB{ 
       background-image: url(spriteX2.png); 
       width:25px; 
       height:25px; 
   } 
   } 
   
   .spriteA{ background-position: 0 50%; } 
   .spriteB{ background-position: -31px 50%; } 
   

这样一来，后台位置的比例（50％ ）保持您是否使用非视网膜或视网膜分辨率。

Answer 2

我知道这是一个较老的问题，但添加此回复以防其他人提出类似问题。

我对smartsprites工具进行了一些更新，以支持视网膜精灵。有了这个工具，你就可以通过伪指令来注释你的CSS，这些指令告诉工具哪些图像是精灵，运行该工具，它将生成精灵图像和修改后的CSS来引用新图像。

此工具为您提供了哪些图像拼合后，精灵是如何奠定了细粒度的支持，每个图像的精灵填充，等等。希望能帮助到你！

Answer 3

以下是创建低& hiDef视网膜精灵其他在线工具：cssspritegenerator.net

还可生产WEBP形象，并得到更大的图像来大尺寸，所以我们需要减少他们回@ 1大小的小妖精更好的图像格式;）

Answer 4

这个目标有一些任务管理器，mixins和在线生成器。我个人使用grunt作为任务管理器，并将Sprite Smith作为我的一些项目中的模块。

我也用http://www.retinaspritegenerator.com快速精灵一代与视网膜的支持。它也有一系列的序列算法，如Sprite Smith。

Answer 5

有一些惊人的视网膜精灵发生器在那里。我最近使用了我个人喜欢的几个。 1. Sprites 2. Sprite box 3。Retina Sprites 4. Zero Sprites 5. Sprite Generator

如前面的答复中提到，Sprite Smith是一个更真棒发电机。