CSS - 使用一个背景图像,上面有多个图像

Question

我观察到网站通常只使用一个包含多个图像的背景图像.例如,代替使用单独的图标,将所有图标放在一个图像上,然后在不同的部分中使用图像的不同部分.

• 这有什么好处吗？
• 怎么用这个？

例如,对于以下Stack Overflow sprite,我如何只显示其中一个图像？

Answer 1

该技术称为CSS Sprites.基本上你使用CSS的background-position属性并修复height或width为你的元素.

如果你的元素是固定宽度和固定高度的同时你可以自由地创建一个更紧凑的图像.有关更复杂的示例,请参阅此站点.

Answer 2

您正在谈论 CSS 精灵，其中背景位置在悬停时会发生变化。在这里了解更多：

http://css-tricks.com/css-sprites/