CSS - 对其中许多使用1个图像

Question

在bootstrap.css中，有一个主图像，其中包含所有图标和内容。

如何使用CSS在“主图像”中显示图像？

我会使用保证金吗？

Answer 1

这就是所谓的图像精灵。您将其显示为背景图像，并使用背景位置指定要显示的区域。

例如，在图像中显示20x20像素，区域为40,100的区域：

.myIcon {
  width: 20px; height: 20px;
  background: url(spriteimage.png) -40px -100px;
}

Answer 2

它被称为CSS sprite，您可以使用background-position属性访问精灵中的不同图像。

这样的事，

background: url('main-sprite.png') -10px -10px;

其中-10px -10px是精灵中图片的x and y positions。