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.

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

例如，对于以下 Stack Overflow 精灵，我将如何只显示其中一张图片?

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屋！