CSS Sprites 简单介绍
Google 采用的方法 - position,left,top
先看原图
HTML代码
<style>
#logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{border:none;position:absolute;left:-0px;top:-26px}
</style>
<a id=logo href="http://www.google.cn/webhp?hl=zh-CN" title="Google 主页">Google<img width=168 height=119 src="http://www.52css.com/attachments/month_0906/82009621221830.png" alt=""></a>
#logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{border:none;position:absolute;left:-0px;top:-26px}
</style>
<a id=logo href="http://www.google.cn/webhp?hl=zh-CN" title="Google 主页">Google<img width=168 height=119 src="http://www.52css.com/attachments/month_0906/82009621221830.png" alt=""></a>
CSS 中 id=logo 的样式父元素采用相对定位方式，定义了宽度和高度，使用 overflow:hidden 来隐藏溢出部分；而 img 元素则采取绝对定位方式，使用 left 和 top 进行图片定位
结果
Google
背景法:background-position
先看原图
HTML代码
<style type="text/css">
.min, .max {
width:16px;
height:16px;
background-image:url(http://www.52css.com/attachments/month_0805/4200859125518.png);
background-repeat: no-repeat; /*我们并不想让它平铺*/
text-indent:-999em; /*隐藏文本的一种方法*/
}
.max { background-position: 0 -350px;}
.min { background-position: 0 -400px;}
</style>
<div class="max">最大化</div>
<div class="min">最小化</div>
.min, .max {
width:16px;
height:16px;
background-image:url(http://www.52css.com/attachments/month_0805/4200859125518.png);
background-repeat: no-repeat; /*我们并不想让它平铺*/
text-indent:-999em; /*隐藏文本的一种方法*/
}
.max { background-position: 0 -350px;}
.min { background-position: 0 -400px;}
</style>
<div class="max">最大化</div>
<div class="min">最小化</div>
结果
最大化
最小化
总结
CSS Sprites优点
CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
CSS Sprites缺点
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。
