在我的旅行中，我经常检查我访问的网站的HTML，CSS和Javascript源代码。有一种我见过的技术仍然使我神秘化。我经常发现像这样的图像：
http://d297h9he240fqh.cloudfront.net/cache-588bcdd93/images/compass/icon-sprite.png
它充满了图标，但在网站上使用此图像一次只能将图像限制为大图像中的一个图标。他们基本上似乎对大量图标使用相同的图像。
如果我理解正确，那么当涉及图像的加载和缓存时，这将非常有用，因为它是一个单独的图像，以某种方式被分解。这是如何运作的？这是用Javascript完成的吗？
答案 0 :(得分：3)
这个想法叫做CSS Sprites。搜索，但基本上你对如何/为什么工作的直觉是正确的！
见SO：css icon images or icon image?
jQuery UI是一个库的一个例子，它也使用它来产生极好的效果。
答案 1 :(得分：1)
本文涵盖了它： http://css-tricks.com/css-sprites/
实际上，您使用了background-position属性。如果您尝试水平或垂直平铺背景图像，这将决定您的精灵表的方向。 （如果你没有拼贴任何精灵，那么方向根本不重要）
