FITURE

本人不是什么技术达人，只是喜欢折腾，喜欢简单，追求完美。对于CSS我不敢说什么精通，只能说能用CSS基本实现结构与表现分离，能够恰当的运用实现一般的效果，偷笑……在说CSS Sprites之前，先来看段CSS代码：

background: url(../img/stuff.png) -337px -225px no-repeat;

这是淘宝的一个页面元素的CSS代码。额，不知各位第一次看到的时候有没有看懂，反正我第一次看到的时候是蒙了，完全不知道是什么东东，其实这就是今天的主题CSS Sprites.上面的代码是CSS的代码合写，可以这样分开：

background-image: url(../img/stuff.png);

background-position:-337px -225px;

background-repeat:no-repeat;

通过以上分析，其中的background-position是CSS Sprites的精华灵魂所在，上面的意思是让背景图片左移337px，上移225px，移动过后其实就是淘宝登录那个按钮，然后通过控制登录按钮的长度和高度实现只显示登录按钮的效果。

CSS Sprites（CSS 精灵、CSS 雪碧），它是一种网页背景图片处理方式，即将以前页面涉及的零星的背景图片，用图片处理软件合并到一张大图中，再利用CSS 中的background-image，background-position组合定位，将这张合并的大图应用到页面的不同地方。

CSS Sprites的应用现在是非常广泛的，几乎每个大的网站，都有使用。额，举例：google search、Google plus、淘宝等……早在2005年CSS Sprites这种技术都有人应用了，并详细阐明了其用途以及原理。为什么这么多的网站，这么多的个人博客都在用这种技巧呢？

1、其最大的原因就是：普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响，从而提高网站的性能。

2、CSS Sprites，能减小页面图片的总大小，节省宝贵的流量资源，从大的方面讲，绿色环保。

3、更换页面风格，更容易简单方便，只需要更改图片中的某些颜色，然后用CSS Sprites做小小的变动就可以达到一般的效果。

诚然也有一些缺点比如利用CSS Sprites，需要利用PS等图像处理软件按照一定的方式合理合并图片，然后对于初识CSS的人们，有一定的难度。但是这些小瑕疵不能成为我们不利用，学习CSS的一个借口，CSS Sprites有其固有的优点，以及一定的好处，对于一些大型的网站，减少其HTTP请求量，减少其网站流量，就是减少其成本。

PS：最后再说说CSS Sprites的repeat，其实我以前就是以为这个不好应用repeat属性，通过一定的了解学习，其实还是可以的，像本博客的header就是用CSS Sprites的一个实际应用，只要把repeat的对象铺满整张图片就可以轻松的实现了。