什么是css中的精灵技术

Question

我想知道关于快速访问网页的css中使用的精灵技术。

Answer 1

它们很酷，因为您可以最大限度地减少http请求，并使您的网页效果得到改善。它们在 SEO 方面也被认为是好的。查看此信息以获取更多信息：

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Answer 2

This page给出了很好的概述。

本质上，它将所有页面的图像放入一个大图像文件中，然后使用CSS仅显示该文件的一部分（以产生多个图像的效果）。这样做的好处是只需要浏览器对所有图像发出一个请求，而不是一堆单独的请求（每个请求都有开销）。

Answer 3

例如，如果您有一组图标，则表示您正在创建一个jpg或png文件并逐个添加图像。然后，您只需基于一个图像创建背景并将其固定在百分比/像素视图中。它使您的代码井井有条，并节省图像加载时间。例如，您有一个窗口，它有一个close，展开图标。您可以创建一个名为windowControlSprite.png的png文件，该文件一个接一个地包含两个图标，然后您可以在css中为此元素创建属性。 #somediv {background-position：0px -20px;}

Answer 4

此外，您可以使用http://www.getspritexy.com/

等工具轻松找到CSS精灵X和Y.

否则，您需要使用Photoshop等图像编辑器或使用Firebug来查找X和Y坐标。