Html 谷歌在他们的标志上耍了什么花招？

当我在Google中搜索时，而不是在他们的主页上，当我看到他们的徽标并复制图像路径时，它显示：

http://www.google.com/images/nav_logo91.png

---

嗯，它不仅仅是一个标志，它还有许多图标。谷歌使用这种方式有什么原因吗？有结果吗？或者只是为了展示他们的技术？另外，如何仅显示图像的一部分？谢谢

它是一个精灵。这样做可以减少文件大小和加载时间

---

您可以使用JavaScript或CSS拼接图像（CSS是更流行的选择）。可以使用

div

标记创建元素，然后将

背景图像

属性设置为指定的URL。然后使用

背景位置

属性将其适当对齐。最后，设置被称为CSS精灵的

div

的预期

宽度和
高度。很多网站都使用这种技术，网站上的所有（装饰性）图片都包含在一张图片中

此单个图像的大小往往小于所有单个图像的总和（每个图像都有自己的颜色表）。此外，从服务器获取单个映像意味着更少的HTTP服务器请求

然后将大图像作为背景放置在div中，并使用
背景位置
和其他CSS属性进行操作，以确保只显示所需的精灵部分。
就像animuson已经解释过的那样，它们被称为CSS精灵，以稍微扩展一点，它们用于防止多余的HTTP请求

通过只加载一个图像，它被缓存，然后网站可以将该图像用于多个背景，但只能通过使用背景位置使某些区域可见

这里有一个很好的解释：