创建简单实用的Css Sprites

Let's start with the basics. What are CSS sprites?

那么让我从基础开始,什么是CSS精灵?

CSS sprites are a way to combine images to improve our page loading time,

CSS精灵是一个组合图片来改善我们的页面的加载时间的方案，
reducing the number of requests our server does. In this article I will

减少请求我们服务器请求工作的，我将在这篇文章中教导你如何去制作它。

teach you how to make them.

下载示例源码

To make clearer what a CSS sprite is, here is an image of a CSS Sprite made by Google:

为了明确什么是CSS精灵,这是一个谷歌制作的CSS精灵图片。



When you make a search in Google, you have a bottom pagination. And you

当你在谷歌中搜索,你会有一个底部按钮页码。然后

get something like this: Gooooooooooooooogle. The letter 'o' is repeated

这个页面有点像: Gooooooooooooooogle.

using the CSS sprite, so instead of loading 15 time the letter, it just

这个字母o是通过使用CSS精灵来重复的，所以它不是加载了包含这15个字母，而是加载了一次精灵使用于所有的字母

loads the sprite with all the letters in it, once.

Creating our CSS sprite - Step 1: Making the image

创建我们的CSS精灵 – 第一步：制作图片

Ok, first of all we must make our sprite image. You can make it in Fireworks,

好了,首先呢我们必须制作我们的精灵图片,有可以使用Fireworks,

Photoshop, or whatever software you use. Here is mine:

Photoshop,or 无论什么你使用的软件制作。这是我的:



As you can see, the sprite consists in a bunch of images divided between them by a 1px width line. This division is not really needed as you can see on the Google Sprite, but it makes our lifes easier when we get to the CSS. Believe me.

如你所能看都的,一堆图片在这个精灵里面由一个像素的线条分割，这些分割线不一定必须就如你看到的谷歌的精灵一样。但是这帮助我们在处理的工作的时候更加的轻松。相信我。

Step 2: Creating our sprite image revealer

第二步：创建我们的精灵图像探测器

Once we make our sprite image, we must make a transparent 1PX x 1PX gif image. This image will later be the one which will reveal our different images inside our sprite.

一旦我们制作了我们的精灵图片，我们必须制作一个透明的1px*1px的gif图片。

这个图片之后将会显示我们精灵内部的不同图片

Step 3: Creating our CSS code

第三步：创建我们的CSS代码

First of all, we will create the class 'sprite', which will load our sprite image.

首先，我们将创建一个class名为’sprite’,将用来加载我们的精灵图片

.sprite {background:url(../images/mySprite.png);}

After loading our sprite, we must define the height and width of the images inside it.

之后加载我们的精灵，我们必须定义一个高度和宽度的图片来显示精灵。



As all my monster images have the same height, and all the application images too, I can give them a class to share their height. I will use the classes: 'monster' and 'application'.

因为我们所有的图片都是一样的高度，并且所有的运用图片一样，我可以给它们共享的高度。我将使用class:’monster’和application’.

.sprite {
background: url(../images/mySprite.png);
}
.monster {
height: 128px;
}
.application {
height: 61px;
}

Now, we must define the width of every image, because they are all different. We will use a class for each one of them.

现在，我们必须定义每个图片的宽度，因为它们都是不一样的。我们将为它们中的每一个使用一个class。

.sprite {
background: url(../images/mySprite.png);
}
.monster {
height: 128px;
}
.application {
height: 61px;
}/* Monsters */
.doctor {
width: 103px;
}
.octopus {
width: 89px;
}
.wolf {
width: 115px;
}
.star {
width: 126px;
}
.dog {
width: 128px;
}
/* Applications -*/.css {
width: 61px;
}
.activityMonitor {
width: 58px;
}
.dashboard {
width: 51px;
}
.quicktime {
width: 53px;
}
.scanner {
width: 74px;
}

All done? Ok, here come's the good part. We must define a background-position to every image in order to show correctly. This background-position must always have negative values, because our background image must move left, to reveal the different images.
We must make every image inside the sprite move to the top left corner, because that is the spot where we begin seeing the image. That corner is equal to 0px in X, 0px in Y. My Sprite, however has a left and top leftover of 2px, so we must take that into account when we define the background-position of the elements.

所有都准备就绪了？好了，要来重要的部分了。我们必须为每一个图片定义一个background-position来正确的显示。这个background-positing 必须总是有一个负值,因为我们的背景图片必须向左移动,去显示不同的图片。我们必须让每一个图片内的精灵移动到左上角，因为那个是开始呈现图片的地方。那个角落是等于X轴是0px,Y轴0px。我的精灵,不管怎么样左面和上面都有2个像素的剩余，所以我们必须把他计算进去当我们在定义背景位置的元素的时候。



Remember the first value of background-position, is horizontal (x-axis) and the second one is vertical (y-axis). Let's finish our wolf. Our wolf must move 196px left and 2px up.

记得我们background-position第一个值,是水平（X-轴）和第二个垂直(Y-轴)。让我们开始完成我们的狼。我们的狼必须向左移动196个像素向上移动2个像素。

.sprite {
background: url(../images/mySprite.png);
}
.monster {
height: 128px;
}
.application {
height: 61px;
}/* Monsters */
.doctor {
width: 103px;
}
.octopus {
width: 89px;
}
.wolf {
width: 115px;
background-position: -196px -2px;
}
.star {
width: 126px;
}
.dog {
width: 128px;
}/* Applications -*/
.css {
width: 61px;
}
.activityMonitor {
width: 58px;
}
.dashboard {
width: 51px;
}
.quicktime {
width: 53px;
}
.scanner {
width: 74px;
}

Now let's finish all our images using the same method:

现在让我们来用同样的方法完成所有图片的使用：

.sprite {
background: url(../images/mySprite.png);
}
.monster {
height: 128px;
}
.application {
height: 61px;
}/* Monsters */
.doctor {
width: 103px;
background-position: -2px -2px;
}
.octopus {
width: 89px;
background-position: -106px -2px;
}
.wolf {
width: 115px;
background-position: -196px -2px;
}
.star {
width: 126px;
background-position: -312px -2px;
}
.dog {
width: 128px;
background-position: -439px -2px;
}/* Applications -*/
.css {
width: 61px;
background-position: -2px -133px;
}
.activityMonitor {
width: 58px;
background-position: -64px -133px;
}
.dashboard {
width: 51px;
background-position: -123px -133px;
}
.quicktime {
width: 53px;
background-position: -175px -133px;
}
.scanner {
width: 74px;
background-position: -229px -133px;
}

Take a look at the Y-positioning of the elements. It's the same for all the monsters, and all the applications. That is because they are aligned in the same vertical position; ergo, they all share the same distance to the top edge.

Step 4: Creating our HTML code (piece of cake)

第四步：创建我们的HTML代码(容易之事)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creating easy and useful CSS Sprites - By Ignacio Ricci - www.ignacioricci.com</title>
<link rel="stylesheet" type="text/css" href="styles/sprite.css" />
</head>

<body>

<img src="images/transparent.gif" class="sprite monster doctor" alt="Doctor Image" />
<img src="images/transparent.gif" class="sprite monster octopus" alt="Octopus Image" />
<img src="images/transparent.gif" class="sprite monster wolf" alt="Wolf Image" />
<img src="images/transparent.gif" class="sprite monster star" alt="Star Image" />
<img src="images/transparent.gif" class="sprite monster dog" alt="Dog Image" />
<img src="images/transparent.gif" class="sprite application css" alt="Css Image" />
<img src="images/transparent.gif" class="sprite application activityMonitor" alt="ActivityMonitor Image" />
<img src="images/transparent.gif" class="sprite application dashboard" alt="Dashboard Image" />
<img src="images/transparent.gif" class="sprite application quicktime" alt="Quicktime Image" />
<img src="images/transparent.gif" class="sprite application scanner" alt="Scanner Image" />

</body>
</html>

下载示例源码

英语原版地址 http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites