本文旨在向你说明CSS Sprites的含义以及它的应用方法！

CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需 顾忌这个问题。

按照yahoo的rules for high performance web sites的原则，应当较少Client与Server端间 的HTTP Request次数。通过CSS Sprites方法将多张图片组装成单独的一张图片，可以有效减少HTTP请求 的次数。

当整幅图片载入完成后，你就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用。

加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。

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

CSS sprites are a way to combine images to improve our page loading time, 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:

When you make a search in Google, you have a bottom pagination. And you get something like this: Gooooooooooooooogle. The letter ‘o’ is repeated using the CSS sprite, so instead of loading 15 time the letter, it just loads the sprite with all the letters in it, once.

Creating our CSS sprite – Step 1: Making the image

Ok, first of all we must make our sprite image. You can make it in Fireworks, Photoshop, or whatever software you use. Here is mine:

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.

Step 3: Creating our CSS code

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

.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’.

.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.

.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.

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.

.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)

<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” />

Define de source as the transparent 1PX x 1PX gif image we created before, apply the clases and it’s sprite time!

Limitations of this method

For a CSS sprite image to work, it must always have a width, height and background-position. If you don’t define the width or height of the element, you will see the whole sprite in that image. Quite obvious but is good to mention.

以上素材下载地址：(download,more..)