使用 css sprite 而不是更改背景 url 的好处

Posted 2023-03-10

【中文标题】使用 css sprite 而不是更改背景 url 的好处

【英文标题】：benefits of using css sprites rather then changing the background url

【发布时间】：2012-06-24 23:29:36

【问题描述】：

我一直在使用纯 css 处理翻转图像，我知道有两种解决方案可以达到预期的效果。我想知道这些方法是否有任何我不知道的好处，以及是否有首选方法或者只是一种偏好（我只是想在完成一个巨大的项目之前确保没有惊喜）

第一种方法

我遇到的第一种方法是将多个图像保存为一个图像。 然后将图像设置为分隔线的背景（小于整个图像） 然后在:hover 上，您将背景位置设置为负值并出现其他图像

我想到的一些缺点和优点是：

专业人士

您不需要手动预加载图像（通过将代码放在 css 文件的末尾）

可能会更容易组织您的图像文件，因为它们可能会更少

缺点

很难知道图像到底移动了多少，尤其是如果您有单独的团队设计图形

第二种方法

我遇到的第二种方法是设置分隔线的图像背景，然后更改:hover上的背景网址

我能想到的一些缺点和优点：

专业人士

开发时间可能更短

可以更轻松地交换翻转图像，无需指定分隔线的大小

缺点

需要在css文件末尾预加载图片

如果你有很多文件，你的图片文件夹可能会更乱

我有什么优点或缺点吗？一种方法通常优于另一种方法，为什么？还是个人选择，随便用一个都没问题？？

更新： Here 是使用纯 css 的第二种方法的简单预加载的链接。我认为有一种更简单的方法（只是放置链接），但我找不到它。这仍然是非常基本的。

更新(2)： 我了解到精灵有额外的

通过减少 http 请求的数量使网站更快的好处。

并且翻转的好处是尽可能快而没有闪烁

还有一个错误是使网站的可访问性降低，并且会限制 html 中 title 和 alt 属性的潜在好处。 （如果不正确地用于所有图像，而不仅仅是装饰和按钮）

【参考方案1】：

CSS sprites（第一种方法）通常受到青睐，因为预加载对于保持高质量的用户体验不是必需的。

Wex 发布的 ALA 链接很好地介绍了精灵的好处，Smashing Magazine 最近发表了一篇文章，解决了您在使用带有许多图像的精灵时对背景位置的担忧

http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/

【讨论】：

在那篇文章上+1，很好的现代示例，说明如何实施困难的解决方案。

在第二种方法中，预加载是必要的，但是它非常基本，因为通过在 CSS 末尾放置文件的链接将预加载它们。没有必要的 javascript 或 html 代码。这种简单的预加载比处理定位要好得多。再说一次，也许我在读完这篇文章后会改变主意（我会在睡一觉后读你的文章）

您的文章是如何管理精灵的绝佳答案。然而，它并没有解释是否应该使用精灵。您的文章确实包含一篇文章，对此进行了一些讨论，但该文章并未声称精灵一定是最好的方法。 coding.smashingmagazine.com/2010/03/26/…

【参考方案2】：

第一种方法比第二种方法好得多。您不必总是将每张图像捆绑成一张巨大的图像——这通常会使添加新图像变得困难——但将每张图像及其悬停状态放在同一张图像中确实有意义，这样你就不会看到悬停时闪烁，因此您不必依赖某些预加载脚本。

这是一篇关于使用 CSS 精灵的好处的好文章：http://www.alistapart.com/articles/sprites

【讨论】：

您不需要预加载脚本。您只需将所有图像的列表放在 css 代码的末尾，其中包含所有 url，并且您的图像已预加载。 （我会在休息后看你的文章，我需要休息）