CSS - 使用一张背景图片和多张图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5194724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - using one background image with multiple images on it
提问by Roman
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?
例如，对于以下 Stack Overflow 精灵，我将如何仅显示其中一张图像？
回答by vbence
The technique is called CSS Sprites. Basically you use CSS's background-positionproperty and fixed heightor widthfor your element.
该技术称为CSS Sprites。基本上，您使用 CSS 的background-position属性并固定height或width用于您的元素。
If your elemnts are fixed width andfixed height at the same time you can freely create a more compact image. See this sitefor more complex examples.
如果您的元素同时是固定宽度和固定高度，您可以自由地创建更紧凑的图像。有关更复杂的示例，请参阅此站点。
回答by Dave Kiss
You are talking about CSS sprites, in which the background position changes on hover. Learn more here:
您正在谈论 CSS 精灵，其中背景位置在悬停时发生变化。在此处了解更多信息：
回答by awm
Change the css property background-position.
更改 css 属性background-position。
回答by sandeep
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.
是的，使用 sprite 对网站性能有好处，因为网站上的每个组件都会发送不同的 http 请求。所以，当我们使用 sprite 图像时，http 请求变少，网站性能提高。该规则也适用于 css 也少 css 文件少 http要求。您可以在 safari web 检查器的帮助下自己完成。
for more better performance download "yslow"
为了获得更好的性能，请下载“yslow”
回答by Jan Daniel
回答by Dean Smith
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.
一段时间以来，将两张图像放在一张 sprite 表上的做法很常见，但趋势是将所有背景图像组合在同一张 sprite 表上，以便只为所有这些图像加载一个文件。这里有一个相当不错的教程。
回答by RoToRa
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.
它的优点是只需加载一张图像，这样悬停（滚动）效果之类的效果就会更快。该技术通常称为“CSS 精灵”。谷歌一下。
