转自：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>
?????? <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>
??????? #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>
??????? #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技术？
在网页设计的过程中，有一个环节叫做“切片”，我们都知道，切片的目的是把图片分割成
小块，读取页面的时候能够分开加载，让用户更快的看到页面，当然切片更多是为了后续
的设计
