CSS Sprites技术介绍

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有单独占用内存，所以被取名为“Sprite精灵”。

时间进行到2000年，Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生，它基于同上文提到的游戏Sprite同样的原理，并且使用CSS更容易控制，很快的流行开来。

2004年，Dave Shea 提出了一种使用CSS控制组合图片的方案 ，将许过小的图片组合在一起，使用css定义背景属性，来控制图片的显示位置和方式。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites用在哪里？

CSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空白，使得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目的方式。

苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果：

Google使用了极其简化的方案：

CSS Sprites常用来合并频繁使用的图形元素，如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。

CSS属性background-position(图像背景位置)该如何设置

background-position(图像背景位置)这个属性是CSS中非常重要的属性。

根据CSS规范，background-position属性包含了两个(可选的)变量：水平位置(horizontal)和垂直位置(vertical)，例如：

.introduction {
	background-image: url(bg.gif);
	background-position: [horizontal position] [vertical position];
}

使用这个属性，你可以定义块级元素的背景图像位置，可以使用%百分比或px像素为单位来定义图像开始的位置，也可以使用关键字：top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

在“ background-position: x% y%; ”这样一个语句中，x%指水平偏移，y%指垂直偏移，左上角是：0%,0%，右下角是：100%,100%，默认的是50%。

例如，你可以这样定义：

ul li {
	background-image: url(bg.gif);
	background-position: 19px 85px;
}

这样背景图片就被定位到了距离左侧19像素，距离上边85像素。