DIV+CSS背景一张整图(css sprites)

以前看到很多大型网站，整个网站的背景图片，是同一张图片，下载他的背景图片，看到一张图片上有很多小图标。

也就是国外很流行的css sprites，目前国内也有很多网站这样用。

这次在写CSS+DIV时，也这样写了个整站，感觉虽然做网站的整站慢，但在网站的占用资源上，的确省了不少。

　　原理，一般网站的图片都是分开的，每个图片的调用都会占用一个IIS链接，而现在把所有图片放在一张图上时，所有图片都是一个图片，只要调用一次图片，就可以提供整个网页的图片用，这样只占一个IIS链接。

　　在制作过程用，就是把所有的图片，都用背景来实现，比如一个小图标，就用这显示，把exp的样式设置一个背景，背景就是一个图片。

如：

.exp { background-image: url(bg.gif);/*背景图片*/ background-repeat: no-repeat;/*不平铺*/ background-position: -300px -50px;/*设置背景图片在整个图的位置，在前面加个负号*/ width=25px;/*宽度*/ height=25px;/*高度*/ }

看到上面的吧，在设置背景时，会指定背景在图片上的位置，然后控制宽度和高度的大小，这样就显示了一个图标了，同样的方法，把网站所有的界面图片都以这样的方法显示，每个图上都是取大图中的一小部分。

每个小图标在大图片中的位置，可以在PS里用线查看。