css sprites网页背景定位技术的研究及应用

《css sprites网页背景定位技术的研究及应用》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

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

2、；CSS图像拼合；CSS贴图定位；X页；定位　　：TP393：A：1009-3044(2011)20-4964-02　　随着近几年X页设计技术的不断发展，页面的设计逐渐变得越来越精致和巧妙，设计师们开始考虑使用非Javascript的方式来制作一些鼠标经过、悬停菜单的效果，这时CSSSpriteS技术应运而生，它主要是将多幅小图片合成在一张图片上，并且使用CSS样式表控制其定位，CSSSprites技术能有效的减少服务器请求次数，优化X页加载速度，因此在许多大型X站中应用得非常广泛。　　1CSSSprites简介　　CSSSprites中文翻译为“

3、CSS图像拼合”或“CSS贴图定位”，是将多个小图片（例如X页中的背景、按钮、图标等）集中在一张图片上，再利用CSS样式中的定位技术令其在X页中能够在准确的位置上分别显示出来。当X页被加载时，不用加载一个个单独的小图片，而是一次性加载整个Sprites图片，X页显示效果将更加流畅，同时也为了减少用户浏览X页时对服务器的HTTP请求数，减轻服务器的负载，提高X页加载速度，达到优化X站的目的。　　目前CSSSprites被广泛用于X页设计当中，技术也发展得比较成熟，在淘宝、新浪、腾讯等许多知名X站的X页中均使用了CSSSprites定位技术。　　在传统

4、的X页设计方法中，往往利用Fireage”、“background-repeat”、“background-position”等属性进行背景定位，“background-image”属性表示背景图的URL路径；“background-repeat”属性表示背景图是否平铺；“background-position”属性则代表用数值精确的定位出背景图片的位置。　　例如：采用Fire1、item2、item3，代码如下：　　　　　　　　　　　　用于定位的CSS代码如下：　　#item1{background-image:url(sprites.png);

5、　　background-repeat:no-repeat;　　background-position:0px0px;　　height:48px;　　2{background-image:url(sprites.png);　　background-repeat:no-repeat;　　background-position:-42px0px;　　height:48px;　　3{background-image:url(sprites.png);　　background-repeat:no-repeat;　　background-position:-

6、84px0px;　　height:48px;　　，background-position的前一个值表示水平方向的定位，后一个值表示垂直方向的定位。　　3CSSSprites技术的应用范围　　一般来说，CSSSprites技术可以应用在以下几种情况中：　　1)减少图片数量。我们在浏览X页的时候，在浏览器状态栏中经常可以看到“（剩下X项）正在下载图片……”这样的信息，图片数量越多，X页加载的速度越慢。利用CSSSprites技术，将多个同类型的小图片综合在一张图片里，减少图片的数量，同时可以令图标的总容量变小，比如集合了9个图标的一幅Sprites图片

7、的size，会比这9个单张图标的size总和要小，这是CSSSprites的主要作用，以尽量减少图片数量为前提，只要连接服务器一次，就可以将所有图标加载下来。　　2)预先加载鼠标经过时切换图片。在X页中经常会用到鼠标经过时，或鼠标按下时切换到不同图片的效果，这时经常会出现延迟或图片无法显示的情况，这主要是因为浏览器为了尽快地显示页面，一般只是将打开页面时用到的图片下载到本地，而鼠标经过图片往往是等到用户将鼠标移动到按钮时，图片才开始下载。如果把多种状态的图合并成一张图，再使用CSSSprites技术模拟动态切换效果，效果将会更加流畅。3)自适应宽度

8、的背景图，也叫滑动门。如果页面中存在平铺背景图的效果，并且带有边角，可以在一张图片中结合平铺的背景和边角，再利用CSS背景