CSS Sprites网页背景定位技术的研究及应用

摘要：目前CSS Sprites技术被普遍运用在国内外大型网站的页面设计中，它主要是将网站上用到的一些小图标整合到一张单独的Sprites图片中，图片格式可以是png、gif或jpg，然后使用CSS中的background-position属性对其在页面上进行精确定位，而不是将图片用标签直接添加在网页中。这样做可以减少服务器的连接次数，减轻服务器负担，使网页显示效果更加流畅。该文主要在分析CSS Sprites技术原理的基础上，对其如何应用及可能遇到的问题进行了一些分析和探讨。

关键词：CSS Sprites；CSS图像拼合；CSS贴图定位；网页；定位

中图分类号：TP393文献标识码：A文章编号：1009-3044(2011)20-4964-02

随着近几年网页设计技术的不断发展，页面的设计逐渐变得越来越精致和巧妙，设计师们开始考虑使用非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代码如下：

3) 自适应宽度的背景图，也叫滑动门。如果页面中存在平铺背景图的效果，并且带有边角，可以在一张图片中结合平铺的背景和边角，再利用CSS背景定位实现。例如圆角矩形效果的实现，可以在Sprites图中单独绘制出上下左右四个顶角圆角的效果，中间的背景只要做一小块矩形即可，利用CSS平铺实现来填充整个DIV，具体宽度高度可以自定义，而四个圆角的位置则在网页中用CSS来定位，这样做可以简化html文档的结构。

4 运用CSS Sprites技术时可能遇到的问题

虽然CSS Sprites技术非常强大，但使用过程中也存在一些不可忽视的问题：

1) 在图片合并的时候，需要把多张图片有序的合理的合并成一张图片，要把握好图标之间的空隙，防止网页中出现不必要的背景。如果在宽屏，高分辨率的显示器下，图片如果不够宽，很容易出现背景断裂的情况。

2) 在开发和设计图片的时候，需要通过Fireworks或Photoshop等图像处理软件测量计算每一个背景单元的精确位置，虽然没什么难度，但是很繁琐，不过网上已经出现了“CSS Sprites 样式生成工具”，甚至有些网站具有在线转换的功能，能够快速的根据Sprites图片计算出CSS样式代码。

3) 在维护和管理图片的时候比较麻烦，如果页面背景有少许改动，比如只是更换一个小图标，那么就要修改整张合并的大图片，如果要改变一个图标的尺寸，很可能需要重新计算图片的位置，这将会非常繁琐，一般只好在别的位置再添加一个图标。

4) 由于CSS Sprites大多使用于较固定的像素定位中，弹性较差，受到定位等因素的制约，无法做到像center相对定位效果一样灵活。

5 小结

CSS Sprites常用来合并频繁使用的图形元素，如区块背景、导航条、icon图标、网站LOGO、分割线、button按钮等，以方便网页中CSS调用。整合Sprites图片时让图标尽量排列得有规律，这样容易定位和维护。将背景颜色一致的图标放置在一起，如果背景颜色不一样, 最好分为两个或多个图片放置。最好将相同栏目的图标放置在一起，可以节省一些 CSS 代码。另外，不要将尺寸较大的图整合在一起，因为这样的图片size会比较大，加载需要一定的时间，而大部分用户都不会耐心地等待页面下载完毕再进行阅读。

参考文献：

[1] 曾顺. 精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2010.

[2] 杜现朝, 许建平, 龙怀冰. Web标准中的定位原理及其应用[J].计算机工程与设计,2008(23).

[3] 张军. CSS Sprites在Web开发中的应用[J].考试周刊,2010(31).

注：本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文