【问题标题】：Is there a CSS sprite generator that also gives retina -versions? [closed]是否有一个 CSS sprite 生成器也提供了retina 版本？ [关闭]
【发布时间】：2013-03-17 11:00:23
【问题描述】：

如果还没有，我将非常感谢有人能提供一些关于如何自己制作视网膜和非视网膜 CSS 精灵的说明。如果可能的话，最好在这个过程中使用一些 CSS sprite -generator。

提前谢谢大家！

【问题讨论】：

我知道这个线程很旧，但如果您需要 Retina 支持、可选的 CSS 嵌入和/或 JSON 输出，还有另一个替代方案：facetstudios.com/sprite-generator

标签： css sprite retina-display

【解决方案1】：

方法一

Here's a Mixin 使用Compass 实现此目的

方法二

创建两个版本的图像文件，一个用于“常规”密度屏幕，另一个用于视网膜屏幕，图片分辨率是两倍。（意思是如果其中一张图片是 23 像素 x 41 像素，则视网膜版本将是 46 像素 x 28 像素）
转到http://spritegen.website-performance.org/ 并创建两个版本的精灵图像。假设您的图像尺寸小于 25 像素。选择水平偏移：第一个非视网膜版本为 25px，视网膜版本为 50px。将您的精灵保存为 sprite.png 和 spritex2.png

在您的 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%)。

【讨论】：

非常感谢 OpherV！尽管如此，在每个 ruby 和 Compass 安装都花了一些时间在终端中收到大量错误消息之后，我担心我仍然是一个太多的设计师并且没有足够的技术知识来处理这个选项.. . 如果没有更简单的选择，我当然要更深入地研究它。
好吧，至少你已经尝试过了 :) 让我用其他替代方法更新我的答案

【解决方案2】：

这是另一个用于创建低和高清晰度视网膜精灵的在线工具：cssspritegenerator.net

也可以生成webp图片，图片越大尺寸越大，所以我们需要将它们缩小到@1-size sprite，图片格式更好;)

【讨论】：

【解决方案3】：

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

我还使用http://www.retinaspritegenerator.com 来快速生成带有视网膜支持的精灵。它还有一系列序列算法，如 Sprite Smith。

【讨论】：

【解决方案4】：

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

我对@987654321@ 工具进行了一些更新，以便能够支持视网膜精灵。使用此工具，您基本上可以使用指令来注释您的 CSS，告诉该工具要绘制哪些图像，运行该工具，它将生成精灵图像和修改后的 CSS 以引用新图像。

此工具为您提供细粒度的支持，包括对哪些图像进行精灵化、精灵的布局方式以及每个图像精灵的填充等。希望对您有所帮助！

【讨论】：

【解决方案5】：

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

如上一个答案所述，Sprite Smith 是一个更棒的生成器。

【讨论】：