CSS sprites 技术使用心得

转自：http://blog.163.com/fayzzz@126/blog/static/1198955062009525945207/

CSS sprites 技术使用心得   

2009-06-25 09:45:20|  分类： 默认分类|字号 订阅

 

 

转载自： http://sites.google.com/site/heavenhao/Home/article/css-sprites-ji-shu-shi-yong-xin-de

 

Css Sprites 技术逐渐流行，各大网站上都可以看到它的身影。

但从本质上，Css Sprites 只是 Css 技术的一个使用小窍门，初学者也能快速上手。

Css Sprites 简单解释：

定制元素的长和宽，把元素变成一个取景框，然后通过背景图片的相对位移来显示图片中需要的部分。

以下就用一个由多幅图片组成的导航栏作为例子，解释一下 Css Sprites使用中需要注意的地方

html结构 

<ul>
       <li id='nav_1'></li>
       <li id='nav_2'></li>
       <li id='nav_3'></li>
</ul>

Css代码    注意：虽然能正确显示，但需要优化

<style>
        #nav_1,#nav_2,#nav_3{ width:80px; height:24px;}
        #nav_1{background:url(images/nav.gif) no-repeat -5px -10px;}
        #nav_2{background:url(images/nav.gif) no-repeat -105px -10px;}
        #nav_3{background:url(images/nav.gif) no-repeat -210px -10px;}
</style>

Css代码    注意：这才是正确的代码

<style>
        #nav_1,#nav_2,#nav_3{ width:80px; height:24px; background:url(images/nav.gif) no-repeat;}
        #nav_1{background-position:  -5px -10px;}
        #nav_2{background-position: -105px -10px;}
        #nav_3{background-position: -210px -10px;}
</style>

为什么两段CSS代码显示的效果一样，但我说其中一个是正确的，而另外一个需要优化？

这就回到一个核心问题：为什么我们要使用Css Sprites技术？

在网页设计的过程中，有一个环节叫做“切片”，我们都知道，切片的目的是把图片分割成

小块，读取页面的时候能够分开加载，让用户更快的看到页面，当然切片更多是为了后续

的设计需要。

然而任何技术的诞生都有它的时代背景，Css Sprites诞生在一个普及宽带的环境下，在

这个环境中，图片的体积并不是影响用户访问速度的关键，大量的HTTP请求导致服务器

堵塞才是关键，当服务器堵塞就会出现部分图片无法显示，也就是常见的：红X。

Css Sprites 技术就是为了解决这个问题而诞生的。相信谁也不愿意看到自己精心制作的

图片导航栏，由于部分图片加载失败而变得奇丑无比吧？

让我们回到代码，从HTTP请求数量的角度去分析，为什么第一段CSS需要优化，在这种

情况下，浏览器会认为 #nav_1   #nav_2   #nav_3的背景是3张图片，请求3次，而第二种

情况下，浏览器才会正确的识别出3个元素使用的是同一张图片，只产生一个HTTP请求。

 

在常见的页面导航条，CMS系统，OA系统等设计中，大量使用了小图标，一个页面可能

就有几十个小图片需要加载，一旦出现某些图标显示不了，这将大大降低用户友好度，

使用Css sprites技术，把所有图片集成在一张图片上，然后只加载一次，全部图标都会

同时显示，甚至我们可以在负载较轻的页面预先加载整站的图标文件，当别的页面需要

使用时就可以从缓存调出，从而大大提高了WEB 应用的效率。