CSS优化
我注意到 Digg 和 Google 在他们的 GIF 标题图像中使用了一种 CSS 优化。例如，digg 使用此图像：
他们为什么使用此技术以及如何在我自己的网站中执行此操作？
I noticed that Digg and Google are using a kind of CSS optimization in their GIF header image. For example digg uses this image:
Why are they using this technique and how to do it in my own site?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这些称为 CSS 精灵。它们用于减少服务器请求的数量。
看看这篇关于它们的好文章：http://www.alistapart.com/articles/sprites/< /a>
These are called CSS sprites. They are used to reduce the number of server requests.
Check out this nice article about them: http://www.alistapart.com/articles/sprites/
CSS Sprites：图像切片的死亡之吻：
A List Apart
杂志
这种技术的目的是通过组合所有图像来减少 HTTP 请求。
CSS Sprites: Image Slicing’s Kiss of Death:
A List Apart
Magazine
The purpose of this technique is to reduce HTTP-requests by combining all images.
它称为 css sprite
It's called a css sprite
我相信这些被称为
splices（或者是sprites）；基本上，它们一次性加载整个图像，并告诉 CSS 仅显示其中的一部分，这样就避免了必须（预）加载大量图像。它们增加了页面的响应能力，因为连续的图像会立即加载。
正如 weichsel 提到的，请查看文章@A List Apart。
I believe these are called
splices(or is it sprites); basically they load up the whole image one time and tell CSS to display only part of it, that way they avoid having to (pre)load lots and lots of images.They add more responsiveness to the page, since consecutive images are loaded immediately.
As weichsel mentioned, check the article @ A List Apart.
他们使用该技术来下载一张图像，而不是浏览器可能建立许多不同的连接来下载多个图像。
然后，您可以使用“背景位置”和“宽度”等 CSS 属性的组合将图像“裁剪”为 CSS 背景图像。
当我写这篇文章时，其他人发布的链接可能有很好的裁剪图像的技术。
They use that technique so one image is downloaded rather than the browser potentially making many different connections to download multiple images.
You can then "crop" the image as a CSS background-image using a combination of CSS properties like "background-position" and "width".
The the links the others are posting while I write this probably have good techniques to crop the images.