Question

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

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

由于我无法弄清楚如何缩放CSS精灵，我有点卡住了 - 如何使用CSS精灵实现任意分辨率？

Answer 1

最优雅的方法是使用CSS3 background-size，但并非所有浏览器都支持此功能（例如IE＆lt; = 8）。您可以查看可以使用的特定于IE的转换或过滤器，然后添加-mz-，-webkit-和-o-选择器，以获得您要定位的浏览器所需的效果。< / p>

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

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/

Answer 2

我知道无法改变CSS精灵的大小，抱歉。

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

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

您可以编辑单个图像组件，然后使用SpriteMe生成Sprite。你不想生成精灵，然后调整整个Sprite图像的大小，因为那时你的每个元素的CSS位置都会被抛弃。

Answer 3

我看到的选项是：

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

高分辨率CSS精灵

3 个答案: