创建简单有用的CSS Sprites

让我们从头开始吧. 什么是CSS Sprites?

CSS sprites (CSS精灵,也有人翻译成CSS妖精) 是一种通过整合图片来改善我们的页面的加载时间,减少服务器请求数的方法。在这篇文章里,我将教你如何来实现它们。

看一下演示 | 下载

为了搞清楚什么是CSS sprite ,这里是一张 Google制作的CSS 精灵图片:

CSS Sprite made by Google

当你用谷歌搜索的时候,你会发现页面底部的分页,你会看到就像这样的东西: Gooooooooooooooogle. 字母 ‘o’ 是用CSS sprite平铺的,这样就替代了重复加载15次字母,它只是加载了包含所有字母的精灵,一次完成。

创建我们的CSS sprite – 步骤一: 制作图片

Ok, 首先,我们必须制作我们的精灵图片。你可以使用Fireworks,Photoshop或任何你能使用的软件。这里是我做的:

CSS Sprite Example

正如你看到的,精灵是由一些中间被1像素款的线划分开来的图像组成的。这种区分不是真的必须的,就像你所看到的谷歌的精灵,但当我们写CSS的时候它使我们的工作更加方便,请相信我。

步骤二: 创建我们的精灵图片显示者(显示层)

一旦我们制作了我们的精灵图片,我们必须制作一个透明的1px x 1px gif图片。这个图片稍后会是在我们的精灵里用来显示不同的图片的东西。

步骤三:编写CSS代码

首先,我们先创建一个类’sprite’,它将加载我们的Sprite图片。

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

在加载我们的精灵之后,我们必须精确定义里面的图片的高度和宽度。

Width and Height of the Sprite Images

左右的图片有同样的高度,所有的应用也是,我可以给他们一个class来共用他们的高度。我将使用这两个class:monsterapplication

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

现在,我们必须定义每一个图片的宽度,因为他们是不同的。我们将为他们中的每一个定义一个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;}

做完了? Ok, 现在到最精彩的部分了。为了恰当的显示,我们必须对每一个图片定义个 background-position。 这个background-position 必须一直有负值,因为我们的背景图片必须向左移动,来显示不同的图片。

我们必须让精灵里面的图片想左上角移动,因为那里是我们开始看图片的起点。那个角相当于* X轴的0px, *Y轴的**0px。

然而,我的精灵在左边和上边两个像素的空白,所以当我们定义元素的background-position时我们必须重视它们。

2px Leftover in the CSS Sprite

记住background-position的第一个值, 是水平方向(x-轴) ,第二个是垂直方向(y-轴). 让我们完成我们的这头狼。我们的狼需要想左移动196px并向上移动 2px 。

Defining the background-position of an image in the Sprite

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

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

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

看一下这个元素的Y轴,所有的怪兽,和所有的应用(的Y轴)是一样的。这是因为他们在同样的垂直位置排在一行。因此,他们全部分享到顶部变现同样的距离。

步骤四: 编写HTML 代码(小意思)

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

定义这些代码用我们之前做的透明的1PX x 1PX gif图片,添加样式,然后就是精灵的时间了!

这个方法的现在

要使CSS精灵工作的话,必须始终有一个宽度、高度和背景位置。如果你没有定义元素的高度或宽度,你将在那个图片上看到整个精灵图片。相当纠结但是还比较好接受。

教程中用到的图标

这个教程中用到的图标是David Lanham制作的Somatic Xtras 2 Icons