方法1

Question

如果还没有，我会非常感激，如果有人可以自己做一些关于如何制作视网膜和非视网膜CSS精灵的说明。如果可能的话，最好在过程中使用一些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

创建两个版本的图像文件，一个用于“常规”密度屏幕，另一个用于视网膜屏幕，图像分辨率是两倍。（意思是如果其中一张图片为23像素×41像素，则视网膜版本为46像素×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％）。

Answer 2

这是另一个创建低和低的在线工具。 hiDef retina sprite：cssspritegenerator.net

也可以生成webp图像，并且随着更大的图像变大，所以我们需要将它们还原为具有更好图像格式的@ 1-size sprite;）

Answer 3

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

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

Answer 4

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

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

这个工具为您提供了细粒度的支持，图像被精简，精灵的布局方式，以及每个图像的精灵填充等等。希望它有所帮助！

Answer 5

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

正如前面的回答中提到的，Sprite Smith是一个更棒的生成器。

是否有CSS精灵生成器也提供视网膜逆转？

5 个答案:

方法1

方法2