CSS Sprites技术

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

一张完整的图片，如何在里面获取你需要的一小张呢？CSS Sprites技术可以帮你解决.
优点
跟能够提升网站性能有关。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
也有可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。
总结
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。
下面我们来看例子吧。
.max {
width:16px;
height:16px;
background-image:url(
http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png
);
background-repeat: no-repeat; /*我们并不想让它平铺 **/
text-indent:-999em; /*隐藏文本的一种方法 **/
background-position: 0 -350px; /* 不写的话。默认是0 0px **/
}
.min {
width:16px;
height:16px;
background-image:url(
http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png
);
background-repeat: no-repeat; /*我们并不想让它平铺 **/
text-indent:-999em; /*隐藏文本的一种方法 **/
background-position: 0 -400px;
}
.comasp{
width:30px;
height:20px;
background-image:url(
http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png
);
background-repeat: no-repeat; /*我们并不想让它平铺 **/
text-indent:-999em; /*隐藏文本的一种方法 **/
background-position: 0 -300px;
}
最大化
最小化
自定义

连接：最新发布的YUI中，也是使用到CSS Sprites，几乎都有的CSS装饰图都被一个

40×2000的图

包办。社交大站Facebook最近也使用了一个
22×1150的图片
承担了所有icon.一时间，CSS Sprites无处不在。