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

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背景定位