css 精灵生成器
CSS 精灵(css spirites) 允许您将多个图像合并到一个文件中。 这减少了 HTTP 请求的数量，加快了页面加载速度。
什么是CSS精灵？
CSS精灵可以将多个图像连接到一个图像中。然后，您可以通过使用CSS X和Y背景坐标来使用这一个图像来调用多个图像，告诉浏览器多个特定图像在一张更大的图片中的位置，以及将它们放置在页面上的位置。
精灵如何使我的网站更快？
提高站点速度的方法之一是减少站点完全显示页面所需的HTTP请求数。为设计或功能目的使用大量图像将产生大量这些附加请求。解决这个问题的一个好方法是使用CSS精灵组合图像。我应该为哪些图像使用精灵？
您应该只使用站点范围的图像。换句话说，大多数网站页面上使用的图像。按照以下步骤检测并下载它们：在浏览器窗口中打开网站，查看源代码（HTML和CSS）。
现在搜索您的网站使用的所有站点范围的图像文件（png、jpg或gif文件）的源代码，通常用于网站的设计。
现在将这些图像保存到硬盘。
始终排除用于文章或类似图像的照片，这些照片在您的网站上只使用一次或两次。
如何制作CSS精灵？
按照上面段落中概述的四个步骤选择您保存的图像，CSS spirites 生成器自动将它们组合成一个图像文件。生成器还将自动创建调用站点上多个图像所需的CSS代码。
如何实现CSS和HTML代码？
-复制CSS选项卡中的代码，并将其粘贴到站点的CSS脚本中。
-作为背景位置：X和Y坐标将图像定位在您希望它出现在您的网站或网站上的确切位置。例如：background-position：-808px 25px；
如果我已经使用CSS来调用图像呢？
如果您已经使用CSS来调用图像，而不是HTML标记，则应使用CSS选项卡中的新代码替换用于调用图像的旧CSS代码：
例如，用背景图像：background-image: url('image.png') with background-image: url('sprite.png') background-position: 0px -197px; width: 365px; height: 360px;