当源文件中有多个图像时，如何从源文件中选择特定图像？答案

【问题标题】：How to select specific image from source file when multiple images are in the source file?当源文件中有多个图像时，如何从源文件中选择特定图像？
【发布时间】：2016-09-11 12:37:20
【问题描述】：

我注意到 google 的页面图像源文件可能在一个源中包含很多图像，但在特定位置只会显示一个。

例如，这个：“https://www.google.co.uk/images/nav_logo242.png” 是谷歌结果页面的一个图像源文件，但他们会以某种方式选择此源的特定部分以显示在其网页的一部分中。

我想以某种方式复制它，但不知道这是如何实现的？

我只有在你一次使用一张图像并显示所有图像时才知道如何使用图像源。

提前感谢任何可以帮助我的人！

【问题讨论】：

你想达到什么目的？您能否将您在 Question 中尝试过的html、css、javascript 包括在内？
这是一个项目，我需要使用 html 和 css 重新创建 google 结果页面。在我的游戏中使用图像时，我注意到他们将大量图像捆绑到一个源文件中，但能够在他们的页面上显示相关图像，我很想知道他们是如何做到这一点的。我很茫然，因为我仍然是初学者，并且以前只遇到过其中包含一个图像的图像源。所以我还没有编写任何代码来执行此操作，至于我的项目，我将只使用图像编辑器来获取我想要的位。从源中提取并单独保存。
我想，我只是好奇谷歌如何/为什么将这些图像捆绑到一个源文件中并且仍然能够有效地使用它们。
@MichaelMartinez Google 将这些捆绑在一起，因此只有一次调用服务器来获取图像，而不是多次调用服务器来分别引入每张图像。
再次感谢@haltersweb！ =)

标签： javascript html css image web

【解决方案1】：

这些被称为CSS sprites。

【讨论】：

【解决方案2】：

这些被称为精灵，您可以查看此链接以了解如何使用它们：http://www.w3schools.com/css/css_image_sprites.asp

【讨论】：

【解决方案3】：

这些是 CSS 精灵。

CSS-Sprite 的基本细节，这里 1 张图片将包含很多张图片。在使用精灵时，不必要的带宽使用将减少。

访问单个图像 background-position CSS 属性起主要作用。

【讨论】：

【解决方案4】：

这种类型的图像称为精灵。您可以将图像作为元素的背景，然后使用 css 定位该背景以仅显示您想看到的内容。

这是一个如何使用它的示例。在第一个示例中，我使用的是 div。在第二个示例中，我使用伪元素将其放置在更大的元素中，这样图像的其他部分就不会溢出。

.google, .camera::before {
  background: transparent url(https://www.google.co.uk/images/nav_logo242.png) left top no-repeat;
}
.google {
  width: 120px;
  height: 40px;
  background-position: -22px 2px;
  border: 1px solid red;
}
.camera {
  position: relative;
  padding-left: 30px;
  font-size: 1.5rem;
}
.camera::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  background-position: -40px -131px;
}
.camera:hover::before {
    background-position: -60px -131px;
}

<div class="google"></div>
<p class="camera">
  Hover over me.
</p>

【讨论】：

谢谢你，我会玩弄这个来自己使用它们！