CSS Sprites技术的优缺点

本文主要是介绍CSS Sprites技术的优缺点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.CSS Sprites的优点

(1)利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这也是CSS Sprites最大的优点；

(2)CSS Sprites能减少图片的字节，曾经多次比较过，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

2.CSS Sprites的缺点

(1)在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；

(2)CSSSprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用RIA开发了一个CSS Sprites样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！　　

(3)CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

3.CSS Sprites实例教程解释介绍

首先这些图标素材是放在同一张图片上（PS拼合），然后实现成列表类布局，列表每个前图标不同。使用div css sprites实现此布局（其实使用background样式实现）。

首先此列表布局我们使用ul li列表布局，每个li站一行排版，对ul设置padding实现四周内容与边框一定间距效果，因为每个li前面图标不同，但此背景图片是拼合在一张图片上，所以这里做li里开始使用span标签实现这个不同图标效果，每个图标不同为了区别span所以对span设置不同class，不同class对应设置定位相应的图标。

3、实例教程准备
1）、初始化模板使用：为了兼容各大浏览器，仍然这里使用DIVCSS5提供初始化模板，在此模板基础上修改设置符合本实例CSS样式。
2）、图标素材，这里直接为大家提供拼接好的图标素材图片一张，命名为“ico.png”，如下图，可直接另存为保存使用。

sprites图片素材
sprites案例图片素材（直接点击图片鼠标右键可以另存为保存使用）

4、先布局出效果，再css sprites设置不同背景图标样式
1)、关键html代码：

 <ul class="Sprites"> 
    <li><span class="a1"></span><a href="#">WORD文章标题</a></li> 
    <li><span class="a2"></span><a href="#">PPT内容标题</a></li> 
    <li><span class="a3"></span><a href="#">Excel内容标题</a></li> 
    <li><span class="a4"></span><a href="#">PDF内容标题</a></li> 
    <li><span class="a5"></span><a href="#">文本文档标题</a></li> 
</ul>

为了区别不同效果对span加入不同class。
2）、关键CSS代码

 ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} 
ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} 
ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;  
overflow:hidden;background:url(ico.png) no-repeat} 
ul.Sprites li a{ padding-left:5px}

3）、效果截图

未使用sprites技术引入背景图片效果截图

4）、使用css sprites设置定位背景完整关键CSS代码

 ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} 
ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} 
ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;  
overflow:hidden;background:url(ico.png) no-repeat} 
ul.Sprites li a{ padding-left:5px} 
ul.Sprites li span.a1{ background-position: -62px -32px} 
ul.Sprites li span.a2{ background-position: -86px -32px} 
ul.Sprites li span.a3{ background-position: -110px -32px} 
ul.Sprites li span.a4{ background-position: -133px -32px} 
ul.Sprites li span.a5{ background-position: -158px -32px}

最终实现浏览器效果测试效果图

div css sprites案例效果截图

5）、css sprites关键代码与解释

 ul.Sprites li span.a1{ background-position: -62px -32px} 
ul.Sprites li span.a2{ background-position: -86px -32px} 
ul.Sprites li span.a3{ background-position: -110px -32px} 
ul.Sprites li span.a4{ background-position: -133px -32px} 
ul.Sprites li span.a5{ background-position: -158px -32px}

首先对ul.Sprites li span引入背景
ul.Sprites li span{ background:url(ico.png) no-repeat} 给span设置css背景图片。
再分别对不同span class设置对于图标背景定位具体值
ul.Sprites li span.a1{ background-position: -62px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”62px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a2{ background-position: -86px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”86px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a3{ background-position: -110px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”110px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a4{ background-position: -133px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”133px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a5{ background-position: -158px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”158px，向上“拖动”32px开始显示此背景图标

关键：背景background-position有两个数值，前一个代表靠左距离值（可为正可为负），第二个数值代表靠上距离值（可为正可为负）
背景background-position有两个数值可以为正可以为负，当为正数时，代表背景图片作为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。

6）、背景图片定位数值获取
向左“拖动”，向上“拖动”这些这PS获取图文教程

利用切片工具获取对应小图标在图片文件中位置