CSS-使用一张背景图片和多张图片 [英] CSS - using one background image with multiple images on it

问题描述

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

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.

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

例如，对于以下堆栈溢出精灵，我将如何仅显示其中一张图像?

For example, for the following Stack Overflow sprite, how would I display just one of the images?

推荐答案

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

The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for 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-使用一张背景图片和多张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！