在我的旅行中，我经常检查我访问的网站的渲染 HTML、CSS 和 Javascript 源代码。有一种我见过的技巧仍然让我感到困惑。我经常发现这样的图像：
（来源：cloudfront.net）
它充满了图标，但在网站上使用此图像将图像限制为一次只能显示大图像中的一个图标。它们本质上似乎对大量图标使用相同的图像。
如果我理解正确，那么这对于图像的加载和缓存将有很大帮助，因为它是一个单一的图像，会以某种方式被分解。这是如何运作的？这是使用Javascript完成的吗？
问问题
1127 次
2 回答
4
这个想法被称为 CSS Sprites。搜索它，但基本上你对它如何/为什么工作的直觉是正确的！
看到这个 SO：css 图标图像或图标图像？
jQuery UI 是一个库的示例，它也使用它来达到出色的效果。
于 2012-05-11T17:30:29.647 回答
1
本文涵盖了它： http ://css-tricks.com/css-sprites/
几乎，您使用了 background-position 属性。如果您尝试水平或垂直平铺背景图像，这将决定您的精灵表的方向。（如果你没有平铺任何精灵，方向根本不重要）
于 2012-05-11T17:55:08.657 回答