随着近几年网页设计技术的不断发展，页面的设计逐渐变得越来越精致和巧妙，设计师们开始考虑使用非Javascript的方式来制作一些鼠标经过、悬停菜单的效果，这时CSS SpriteS技术应运而生，它主要是将多幅小图片合成在一张图片上，并且使用CSS样式表控制其定位，CSS Sprites技术能有效的减少服务器请求次数，优化网页加载速度，因此在许多大型网站中应用得非常广泛。
　　1 CSS Sprites简介
　　CSS Sprites中文翻译为“CSS图像拼合”或“CSS贴图定位”，是将多个小图片（例如网页中的背景、按钮、图标等）集中在一张图片上，再利用CSS样式中的定位技术令其在网页中能够在准确的位置上分别显示出来。当网页被加载时，不用加载一个个单独的小图片，而是一次性加载整个Sprites图片，网页显示效果将更加流畅，同时也为了减少用户浏览网页时对服务器的HTTP请求数，减轻服务器的负载，提高网页加载速度，达到优化网站的目的。
　　目前CSS Sprites被广泛用于网页设计当中，技术也发展得比较成熟，在淘宝、新浪、腾讯等许多知名网站的网页中均使用了CSS Sprites定位技术。
　　在传统的网页设计方法中，往往利用Fireworks或Photoshop等图像处理软件直接对网页设计稿进行切图，直接转变为table结构布局的html文档。切图时讲究精细，一般要求图片尺寸越小越好，实际上尺寸大小无所谓，计算机统一都按byte计算。由于网页html文档在客户端显示的时候是按顺序加载的，加载一个文件将会产生一次http请求数，如果网页中的图片过多，特别是有许多小图标、按钮图片等，将会影响到页面加载的速度。
　　2004年，著名的“CSS禅意花园”网站创始人，来自加拿大的Web设计师Dave Shea就提出了一种使用CSS控制组合图片的方案CSS Sprites，将许多小的图片组合在一起，使用css定义背景属性，来控制图片的显示位置和方式。这种技术减少了网页中图片的个数，加速网站显示的速度，在一定程度上起到了优化网站性能的作用。也有人认为采用CSS Sprites技术后，整合过的图片尺寸会变大，不利于图片的快速显示，不过对于目前的网速而言，小于200KB的单张图片的所需加载时间基本是差不多的，因此无需过于担心这个问题。
　　2 使用CSS Sprites技术进行网页背景定位的原理
　　使用CSS Sprites技术时，首先应当采用Fireworks或Photoshop等图像处理软件将网页中一些按钮或小图标等整合到一张背景图片文件中，图片格式可以采用gif、jpg或png-8位格式。如果是颜色值在256色内的小图片，而且底色透明，可以采用png-8位格式； 如果图片是动态的，可以采用gif格式； 如果要合并背景类的大图片，可采用jpg格式。
　　接下来，利用CSS的“background-image”、“background- repeat”、“background-position”等属性进行背景定位，“background-image”属性表示背景图的URL路径；“background- repeat”属性表示背景图是否平铺；“background-position”属性则代表用数值精确的定位出背景图片的位置。
　　例如：采用Fireworks将3个icon图标集成在了一张sprites.png中，该png图尺寸为125*48，每个icon的尺寸都是41*48，间隔是1px，它们在png中的坐标分别是(0，0)(42，0)(84，0)。
　　网页中使用了三个div，分别命名为item1、item2、item3，html代码如下：
　　
　　

　　
　　用于定位的CSS代码如下：
　　#item1 {background-image: url(sprites.png);
　　background-repeat: no-repeat;
　　background-position: 0px 0px;
　　height: 48px;
　　width: 41px;}
　　#item2 {background-image: url(sprites.png);
　　background-repeat: no-repeat;
　　background-position: -42px 0px;
　　height: 48px;
　　width: 41px;}
　　#item3 {background-image: url(sprites.png);
　　background-repeat: no-repeat;
　　background-position: -84px 0px;
　　height: 48px;
　　width: 41px;}
　　网页最终效果如图2所示。
　　background-position(图像背景位置)这个属性是CSS中非常重要的属性。使用这个属性，你可以定义块级元素的背景图像位置，可以使用%百分比或px像素为单位来定义图像开始的位置，也可以使用关键字：left/center/right和top/center/bottom，background-position的前一个值表示水平方向的定位，后一个值表示垂直方向的定位。
　　3 CSS Sprites技术的应用范围 (责任编辑：南粤论文中心)转贴于南粤论文中心: http://www.nylw.net(南粤论文中心__代写代发论文_毕业论文带写_广州职称论文代发_广州论文网）