Question

我注意到他们网页的Google图片源文件可能在一个来源中包含大量图片，但只有一个会在特定位置显示。

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

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

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

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

Answer 1

这些被称为CSS sprites。

Answer 2

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

Answer 3

这些是CSS-Sprites。

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

要访问单个图像，背景位置CSS属性起主要作用。

Answer 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>

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

4 个答案: