CSS Sprite技术

CSS Sprite是一种利用CSS特性对网页中图片进行的特殊处理的运用方式，主要是将多张零星图片综合到一张图片中。这样做的好处是可以减少用户浏览网页时对服务器的请求数，减少服务器负载，达到优化网站的目的。目前多内外著名网站都在使用这种技术。

 

 

 

 CSS Sprite是如何在一张图片中集合多张零星图片的呢？请看图一、图二、图三，它们分别是google、土豆网和搜狗网中用到CSS Sprite技术的背景图片。

它们利用有限的图片空间将多张小图片结合于其中，然后使用CSS背景定位技术将固定宽度和高度的图片作为背景显示出来。

CSS Sprite有三个简单的应用：

1.减少图片限制——就是将多个相似图片综合在一张图片里，CSS Sprite的主要做用，以尽量减少图片数量为前提。

2.单图滚动——即在一张图片中把多种状态合并，然后再使用CSS定位背景图技术模拟动态效果。就像图二中的上下箭头一样，在默认状态下使用背景图的下箭头部分，鼠标悬浮或点击后使用背景图中的上箭头部分。

3.延长背景——如果页面中存在平铺背景图的效果，并且带有边角，可以在一张图片中结合平铺的背景和边角，再利用CSS背景定位实现，例如图二中最顶部的背景条。

CSS Sprite技术必须在实战中才能总结和体会，所以只要经常勤于动手就可以很快提高自己的CSS Sprite技术。

from:http://www.jzxue.com/wangyesheji/css/201106/02-7686.html