使用 CSS 精灵有什么好处？

在本文中，我们将了解 CSS Sprites 的好处，并通过示例了解它们的实现。

CSS Sprite是一组或一组图像文件，它们组合成一个 HTML 文档可以访问的单个文件。然后在 HTML 代码中调用这些图像以在网站上显示。处理许多图像的网页可能需要大量时间来加载和生成多个服务器请求。使用图像精灵的主要好处是减少使网站的堆时间更快的 HTTP 请求的数量。图像加载速度更快，可以轻松地从一个图像切换到下一个图像。

CSS Sprites 示例有助于 Web 开发：

通常在设计网页时，图像被用作单独的文档。因此，当客户端打开一个网页时，程序需要对这些文档中的每一个都发出一个 HTTP 请求，并独立下载并显示它们。这会提示更高的页面加载时间，因为特定网页可以包含无数更普通的图片，如按钮、符号、徽标。 CSS Image sprites 帮助 Web 开发人员将这些常用的小图像加入并混合成一个大图像。然后，浏览器必须只处理一个文件，然后将其显示到所需的部分。

使用 CSS Sprites：对于单个图像，开发人员可以简单地使用 HTML 标签并根据需要在 CSS 中设置样式。但是在使用 CSS Sprites 时，开发人员必须做 2 件具体的事情：

创建精灵表：为了使用 CSS 精灵，我们必须首先通过将所有需要的元素（如按钮、图像、图标等）以网格状模式合并来创建精灵表。这可以使用任何图像编辑软件（如 Photoshop 或 Gimp）来完成。还有许多其他在线工具可帮助制作精灵表。
使用 background-position 属性从网格中访问特定元素：我们必须使用 CSS 属性来访问工作表的不同部分：
width ：精灵图像的宽度。
height ：精灵图像的高度。
背景：创建对精灵表的引用。
背景位置：所需部分的偏移值（以像素为单位）。

请参阅 CSS Image Sprites 文章以获得更详细的描述。

在这里，我们将通过示例了解 CSS Sprites 的使用方法。使用 CSS Sprite 有几个好处，其中一些在下面讨论：

从 Sprite 表中获取图像：

方法：我们创建了一个尺寸为 200px*100px 的精灵表。当我们共享精灵表时，我们会共享一张下的所有图像。因此，为了重新获取我们的图像，我们将精灵表设置为背景，并使用已知的背景位置，这些位置在创建精灵表时是已知的。因此，通过这种方式，我们可以从恶意表中获取所需的图像。考虑一组用户请求的图像。

注意：要从网格中获取图像，只需设置图像的宽度和高度大小，将背景位置更改为所需位置。例如，为了获得第一张图像，将背景位置更改为 -10px，-10px。

示例 1 ：此示例描述了从 Sprite 表中获取图像。

HTML



  

    CSS Sprite
    

  

    
        GeeksforGeeks
        Image Sprite

HTML



  

    

  

    GFG NAVIGATION LIST

HTML



  

    

  

    GFG MOUSE HOVERING

输出：

创建导航列表：

方法：在这里，我们从精灵表创建导航列表。按照我们上面应用的相同概念，我们将获取图像，然后将它们显示为导航列表。我们可以将所需的链接添加到导航列表项，稍后在 body 标记内。

示例 2 ：此示例描述了导航列表的创建。

HTML



  

    

  

    GFG NAVIGATION LIST

输出：

鼠标悬停效果：

方法：我们可以使用 CSS Image Sprite 创建鼠标悬停效果。为此，我们将使用悬停标签与我们想要悬停的项目一起使用。我们将首先为设置背景定位的每个图像设置默认视图。然后，稍后，我们将创建通过更改定位来显示悬停的辅助视图。

示例 3 ：此示例描述了鼠标悬停效果。

HTML



  

    

  

    GFG MOUSE HOVERING

输出：

CSS Sprite 的好处

减少 HTTP 请求的数量：使用 CSS sprites 的主要原因是减少 HTTP 请求，通过将图像捆绑到一个文件中来减少 HTTP 请求的数量，而不会影响实际传输的数据量。
减少整体图像大小：由于每个 kb 都很重要，将所有可重复使用的资产组合到一个文件中将比单独切片它们小。
独立于 JavaScript：因此需要维护的代码更少，跨浏览器测试更容易，可以通过样式属性内联编码，并且没有 DOM hacking。
减少加载时间：包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求，使用 Sprites 可以避免这种情况。
灵活性：在网站的布局和设计上是灵活的。

CSS Sprite 的缺点：

更长的开发时间：用于在 CSS 中对背景位置进行切片、组合和编程。
更多维护时间：无论何时需要进行任何修改，都会仔细重新生成完整的精灵
对 SEO 不太友好：图像有时最好放在 HTML 中而不是放在背景中。 HTML 图像可以包含它们的标题和替代文本，这对 SEO 更有利，而 CSS 背景不能有效地做到这一点。