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

Question

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

• 这有什么好处吗？
• 如何使用？

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

Answer 1

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

如果您的元素固定宽度和同时固定高度，您可以自由创建更紧凑的图像。有关更复杂的示例，请参阅this site。

Answer 2

您正在谈论CSS精灵，其中背景位置在悬停时发生变化。点击此处了解更多信息：

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

Answer 3

更改css属性background-position。

Answer 4

是的，使用精灵对于网站执行是有益的，因为网站上的每个组件都发送不同的http请求。因此，当我们使用精灵图像时，http请求变得更少＆amp;网站性能提高。这个规则也适用于css也少了css文件少http请求。在safari网络检查员的帮助下，你可以自己。

更好的性能下载“yslow”

Answer 5

使用CSS精灵也可以制作例如菜单按钮悬停效果，无需等到第二个图像加载。 see

Answer 6

它的优点是只需要加载一个图像，以便像悬停（翻转）效果更快。该技术通常称为“CSS sprites”。谷歌吧。

Answer 7

在一张精灵表上放两张图片已经很常见了，但是趋势是将所有背景图像组合在同一个精灵表上，只为每一张精灵表加载一个文件。有一个相当good tutorial here。