CSS - 使用一张带有多个图像的背景图像
我发现网站通常只使用一张背景图像，其中包含多个图像。例如，不是使用单独的图标，而是将所有图标放在一张图像上，然后在不同的部分中使用图像的不同部分。
- 这有什么好处吗？
- 这个可以怎么用呢？
例如，对于以下 Stack Overflow 精灵，如何仅显示其中一张图像？
I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section.
- Is there any advantage to this?
- How can this be used?
For example, for the following Stack Overflow sprite, how would I display just one of the images?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
该技术称为 CSS Sprites。基本上，您使用 CSS 的
background-position属性并为元素固定height或width。如果您的元素同时具有固定宽度和固定高度，您可以自由创建更紧凑的图像。请参阅此网站< /a> 获取更复杂的示例。
The technique is called CSS Sprites. Basically you use CSS's
background-positionproperty and fixedheightorwidthfor your element.If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.
您正在谈论 CSS 精灵，其中背景位置在悬停时会发生变化。在此处了解更多信息：
http://css-tricks.com/css-sprites/
You are talking about CSS sprites, in which the background position changes on hover. Learn more here:
http://css-tricks.com/css-sprites/
更改 css 属性
background-position。Change the css property
background-position.是的，使用 sprites 对网站性能有好处，因为网站上的每个组件都会发送不同的 http 请求。因此，当我们使用 sprites 图像时，http 请求会变得更少。网站性能提高。该规则也适用于 css 也适用于更少的 css 文件和更少的 http 请求。您可以在 Safari Web Inspector 的帮助下自行检查。
为了获得更好的性能，请下载“yslow”
yes , using sprites is good for website performs because every single component on website send different http request .So, when we use sprites images the http request become less & website performance increase.That rule is also apply on css also less css files less http request. you can yourself with the help of safari web inspector.
for more better performance download "yslow"
并且使用 CSS 精灵还可以制作菜单按钮悬停效果，而无需等到第二个图像加载。 参见
And with CSS sprites is also possible to make e.g. menu button hover effect without waiting until second image loads. see
它的优点是只需要加载一张图像，因此悬停（翻转）效果等效果更快。该技术通常称为“CSS sprites”。谷歌一下。
It has the advantage that only one image needs to be loaded so that things like hover (roll-over) effects are faster. The technique is usually called "CSS sprites". Google for it.
一段时间以来，将两个图像放在一张精灵表上已经很常见，但趋势已经转向将所有背景图像组合在同一张精灵表上，以便为所有这些图像加载一个文件。有一个相当好的教程在这里。
It has been common for a while to put two images on one sprite sheet, but the tendency has been moving towards combining ALL of your background images on the same sprite sheet to load just one file for all of them. There's a rather good tutorial here.