css 精灵生成器

CSS 精灵(css spirites) 允许您将多个图像合并到一个文件中。这减少了 HTTP 请求的数量，加快了页面加载速度。

可拖放文件到页面此处

图片选项

缩略图

CSS Sprites 合成图

下载图片

Code

CSS代码

HTML代码

什么是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;