高分辨率CSS精灵图

Question

我正在生成CSS雪碧图，希望能在多个尺寸下使用这些雪碧图。我搜索了一下但是没有找到如何对CSS雪碧图进行功能性缩放的方法，例如：如果原始雪碧图是150x150像素，而我希望将其显示为50x50像素，该怎么办？ 'background-size'似乎无法实现。我可以直接生成所需尺寸的雪碧图，但是当我使用ImageMagick的'resize'时，会出现明显的分辨率损失。通常，如果我发现网页上的图像分辨率不够高，我会制作一个更大的图像并调整其大小，从而实际上增加了图像的分辨率。由于我无法找到如何缩放CSS雪碧图的方法，我有点困惑——我该如何使用CSS雪碧图来实现任意分辨率？

- aresnick

---

我认为这更多与ImageMagick的调整大小质量有关，而不是与CSS有关。 - Diodeus - James MacFarlane

@Diodeus，责怪ImageMagick是不公平的。除非您使用矢量图形，否则任何软件都无法实现完美质量的任意分辨率缩放。 - koan

通常情况下，您会从更高的分辨率开始，然后从中制作出较低分辨率的版本。如果图像处理软件无法很好地完成这项任务，那么它就是垃圾。 - Diodeus - James MacFarlane

如果你有一张50x50的图像，然后将其调整大小为48x48，那么某些东西必须被改变。你在使用什么软件？ - koan

我正在使用ImageMagick，似乎“resample”应该能够实现我想要的效果，但我还没有弄清楚如何操作。鉴于我有一张大图像，获取一个更小、更高分辨率的图像似乎是可能的。但我不清楚如何实现。 - aresnick

Answer 1

您可以使用CSS3的background-size来实现最优雅的效果，但并非所有浏览器都支持（例如IE<=8）。您可以考虑使用针对IE的特定变换或滤镜，然后添加-mz-、-webkit-和-o-选择器以在目标浏览器上获得所需的效果。

最不优雅的方法是通过伪造精灵缩放和定位来实现。 HTML代码：

<div class="ex3">
    <img src="http://www.placekitten.com/g/600/400"/>
</div>

The CSS

.ex3 {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;  
}
.ex3 img {
    position: absolute;
    top: -25px;
    left: -25px; 
    width: 150px;  /* Scaled down from 600px */
    height: 100px;  /* Scaled down from 400px */
}

代码编辑器Fiddle

http://jsfiddle.net/brettwp/s2dfT/

- Brett Pontarelli

Answer 2

很抱歉，我不知道如何更改CSS精灵的大小。

至于生成CSS Sprites，请尝试： http://spriteme.org/

或者用于一般图像编辑的软件： http://www.gimp.org/

您可以编辑单个图像组件，然后使用SpriteMe生成Sprite。您不希望生成Sprite，然后调整整个Sprite图像的大小，因为这样会使每个单独元素的CSS位置出错。

- Chad Schultz

Answer 3

我所看到的选项有:

1. 将精灵内容以不同尺寸放入一个精灵中。

2. 或者将原始精灵手动调整大小一次，创建其较小的副本。然后在需要较小图像时引用较小的精灵版本。

- NightHawk