如何制作雪碧

Question

我使用了在线srpite服务http://spritegen.website-performance.org/，但我想知道如何自己制作它们。

如何保存图片应该是如此之小，但在我的网站上使用时它会显示正常尺寸？

Answer 1

Sprites不是要让图像本身变小，而是通过将多个图像打包成一个来减少文件大小。

看看Yahoo's icon sprite。请注意，他们将所有部分图标垂直堆叠在一个大图像中。然后，他们使用CSS来定位背景，只显示精灵图像的一个小窗口，从而为您提供图标。

最后，由你如何安排你的精灵。查看Amazon's sprite的底部。

无论哪种方式，希望这有助于您更好地了解精灵的概念。

Answer 2

来自the very site you link：

  

CSS sprites是一种减少的方法   为图像发出的HTTP请求数   您的网站引用的资源。   图像组合成一个更大的图像   定义的X和Y coorindates上的图像。   分配了这个生成的图像   相关的页面元素   background-position CSS属性可以   然后用于移动可见区域   到所需的组件图像。

所以没有任何神奇的内容：你只需要用自己喜欢的图形工具将所有图片打包成一个巨大的图像，然后将它们作为CSS背景插入。只需看看谷歌的这个CSS精灵：