CSS sprites如何工作？ [英] How do CSS sprites work?

问题描述

我有3个不同的图片，并想使用CSS创建一个sprite。我明白会减少HTTP请求。但是，我对这个概念完全陌生，不知道如何处理这个问题。

I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this.

对我最好的赌注是什么？我也看到有一些CSS sprite生成器，你提交一个.zip的图像，它结合了它们。

What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines them.

我试过这样做，但没有明白发生了什么。任何有关创建和使用CSS sprites的指导都将受到高度赞赏。

I tried doing that, but did not understood what was happening. Any guidance regarding creating and using CSS sprites would be highly appreciated.

更新：我浏览了A List Part文章，但对我并不是很清楚。有人可以提供使用CSS精灵的例子吗？ [答案中的一个简短，自足的例子比SO更适合，而不仅仅是其他地方的例子的链接。 – ed。]

Update: I have gone through the A List Part article but it was not very clear to me. Can someone provide an example of using a CSS sprite? [A short, self-contained example in an answer is preferable for SO than just a link to an example elsewhere. –ed.]

推荐答案

您需要学习的示例如下：

The example you need to study is the following:

#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Sprite.gif是一个大图片，包含所有较小的图像在网格（不一定是）。然后使用定位仅显示包含图像的精灵的那部分。

Sprite.gif is a big image containing all the smaller images in a grid (doesn't have to be). You then use positioning to display just that part of the sprite that contains your image.

有在线工具，给定一组图像返回一个大的精灵图像坐标在哪里可以找到较小的图像。

There are online tools that given a set of images returns a big sprite image with the coordinates of where to find the smaller images.

这篇关于CSS sprites如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！