标签：
一、相关知识讲解
看过雅虎的前端优化35条建议，都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。
减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。
这里我们就拿雅虎的第一条建议：尽量减少HTTP请求数里的减少图片请求数量 进行讲解。
我们都知道，一个网站的一个页面可能有很多小图标，例如一些按钮、箭头等等。当加载html文档时，只要遇到有图片的，都会自动建立起HTTP请求下载，然后将图片下载到页面上，这些小图片可能也就是十几K大甚至1K都不到，假如我们的一个页面有一百个小图标，我们在加载页面时，就要发送100个HTTP请求，如果你的网站访问量很大并发量也很高，假如上百万访问量，那发起的请求就是千万级别了，服务器是有一定的压力的，并且一个用户的一个页面要发起那么多请求，是很耗时的。
所以，我们优化的方案就是：将这些十几K、几K的小图标合并在一张图片里，然后用CSS的background-image和background-position属性来定位要显示的部分。
二、css sprites
css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
css sprites是什么通俗解释：CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
三、具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style type="text/css">
ul{padding: 0; margin: 0; border: red solid 1px; }
ul li{list-style: none; }
ul li a{
background: url(img/ico.png) no-repeat;
width:17px;padding-top:5px;height:15px; float:left; overflow:hidden;}
ul li:nth-of-type(1) a{background-position: -62px -35px;}
ul li:nth-of-type(2) a{background-position: -86px -35px;}
/*背景background-position有两个数值，前一个代表靠左距离值，第二个数值代表靠上距离值*/
</style>
</head>
<body>
<ul>
<li>
<a ></a>Word文章标题
</li>
<li>
<a ></a>PPT文章标题
</li>
</ul>
</body>
</html>
显示效果：
参考：http://www.divcss5.com/rumen/r767.shtml
标签：
原文地址：http://www.cnblogs.com/flyings/p/5406273.html
