高分辨率 CSS 精灵答案

【问题标题】：high resolution CSS sprites高分辨率 CSS 精灵
【发布时间】：2012-01-21 05:42:51
【问题描述】：

我正在生成 CSS 精灵。我想以多种尺寸使用这些精灵。我已经搜索过，但无法弄清楚如何在功能上缩放 CSS 精灵——例如如果原始精灵是 150x150 并且我想以 50x50 显示它，我该怎么做？ background-size 似乎打破了它。

我可以只生成所需大小的精灵，但是当我通过 ImageMagick 的-resize 执行此操作时，我会受到明显的分辨率影响。通常，如果我发现网页上的图像分辨率低得无法接受，我只会制作更大的图像并缩放其大小，从而在功能上提高图像的分辨率。

由于我不知道如何缩放 CSS 精灵，我有点卡住了——如何使用 CSS 精灵实现任意分辨率？

【问题讨论】：

我认为这与 ImageMagick 的调整大小质量有关，而不是 CSS。
@Diodeus 责怪 ImageMagick 是不公平的。除非您使用矢量图形，否则您将无法从任何软件获得完美质量的任意分辨率缩放。
通常您会从较高分辨率开始，然后再制作较低分辨率的版本。如果 IM 做不到，那就是垃圾。
如果您有一个 50x50 的图像，然后将其调整为 48x48，则必须在某个地方提供一些东西。你用的是什么软件？
我正在使用 ImageMagick，似乎 resample 应该能够做我想做的事，但我还没有弄清楚如何工作。鉴于我有一张大图像，获得更小、更高分辨率的图像似乎应该是可能的。但我不清楚如何。

标签： html css image image-processing css-sprites

【解决方案1】：

最优雅的方式是使用 CSS3 background-size，但并非所有浏览器都支持（例如 IE-mz-、-webkit- 和 -o- 选择器，以在目标浏览器上获得所需的效果。

最不优雅的方法是伪造精灵的比例和位置。

HTML

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

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 */
}

小提琴

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

【讨论】：

【解决方案2】：

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

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

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

您可以编辑单个图像组件，然后使用 SpriteMe 生成 Sprite。您不想生成 sprite 然后调整整个 Sprite 图像的大小，因为这样每个单独元素的 CSS 位置都会被丢弃。

【讨论】：

【解决方案3】：

我看到的选项是：

要么在一个精灵中包含不同大小的精灵内容。
或者使用原始精灵并手动调整一次大小以创建一个较小的副本。然后在需要较小图像时参考较小的精灵版本。

【讨论】：