CSS图像精灵

点击上传图标，或将图标拖拽到这里

      配置多个图标合成一张图片参数：
      px
      新生成的CSS精灵图
      在图片上单击右键，可以将图片保存在你的设备上


      自定义CSS类：

      . { ... }

      CSS图像精灵,CSS精灵图制作工具将多个小图标合并成一张大图

      CSS图像精灵是CSS精灵图制作工具，能将多张小图片组合在一起合并成一张大图片，这张图就是可以取代零散小图标的精灵图。网页开发时通过CSS设置显示精灵图的某部分，从而达到预期效果，这就是应用非常广泛的CSS Sprite技术。这款工具是优化网页性能的重要工具，简单、易用，只需上传图标，就能全自动精准生成CSS精灵图。同时生成CSS和HTML代码，这些代码可以参考或直接使用。

      CSS精灵图制作工具使用说明：

      1、上传小图标或者小图片：每个小图大不能大于500KB，而且至少应该上传两个小图，支持PNG、JPEG、GIF等常见格式；

      ➤CSS图像精灵会按照上传图标的先后顺序依次合成，如果要调整顺序，可以用鼠标左键按住已上传的图片进行左右拖拽调整次序，或者删除后再重新上传。

      2、图标间隔：表示每个图标之间的间距，数值越大，间距越大，默认为10px

      3、排序方向：图标的排序方向，支持三个方向：横向、纵向、对角线

      4、图片格式：建议选择高像素、高清、不失真的PNG格式。

      5、保存图片：单击鼠标右键，选择保存图片到你的设备。

      使用CSS精灵图的优势：

      CSS Sprite的主要作用是通过减少网页中的 HTTP 请求数量，提升网页性能，尤其是加载速度，具有以下优势：

      减少HTTP请求数量：每次加载网页时，浏览器会为每个图片文件发送一个 HTTP 请求。如果一个网页包含许多小图标或装饰图片，发送大量请求会拖慢网页的加载速度。使用精灵图后，只需要加载一张图片，减少了请求次数，提升了网页的性能。使页面更快呈现给用户，尤其是在低带宽或移动网络环境中效果显著。

      减少服务器压力：由于多个图片被合并成一张图片，服务器只需处理一张图片的请求，减轻了服务器的负担，特别是在高并发的情况下，这有助于提高服务器的响应速度。

      提高缓存效率：使用精灵图后，浏览器只需缓存一张图片，这样在用户再次访问或页面切换时，不需要重新加载每个图标或按钮。由于精灵图是一张大图，用户在浏览器缓存有效期内，无需重新请求。

      方便管理和维护：如果网站使用了很多小图标或图片，管理多个文件会变得复杂。将它们合并成一张精灵图，管理起来更加简单。通过调整CSS的background-position属性，可以灵活地控制图片的显示，无需频繁修改HTML代码或加载新图片。

      由此可见，当网页需要使用多个小图标时，使用精灵图是高效且实用的不二选择。