html - CSS - 对他们中的许多人使用 1 张图片

Question

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

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

我会使用保证金吗？

Answer 1

这称为图像精灵。您将其显示为背景图像并使用背景位置来指定可见区域。

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

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

Answer 2

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

像这样的东西，

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

精灵中的图像在-10px -10px哪里。x and y positions