CSS 精灵是如何工作的? [英] How do CSS sprites work?

问题描述

我有 3 个不同的图像，想使用 CSS 创建一个精灵.我知道这会减少 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 精灵生成器，您可以在其中提交 .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 精灵的指导将不胜感激.

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 精灵是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！