1、什么是css sprites
css sprites直译过来就是CSS精灵。一般被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是经过将多个图片融合到一张图里面，而后经过CSS background背景定位技术技巧布局网页背景。这样作的好处也是显而易见的，由于图片多的话，会增长http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，若是能用csssprites下降图片数量，带来的将是速度的提高。html
css sprites是什么通俗解释：CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position能够用数字能精确的定位出背景图片在布局盒子对象位置。浏览器
2、适合与不适合CSS sprites拼合布局
一、适合：通常小图标素材网络
小的图标ico类素材，通常图标很小十多像素几十像素的宽度高度，这种适合拼合成一张图实现sprites background背景定位布局。多小ico太多天然加载网页时瞬间会消耗些http iis连接数，但很快加载完又会释放。工具
二、不适合：大图大背景布局
大背景通常用于网页背景，拼合时，设置为网页背景时全部背景都会显示出来。大图拼接拼合会增大图片大小，网络带宽很差的访问者访问时因为背景图大文件大会加载稍慢些，因此大图不推荐拼接拼合来使用css sprites背景定位布局。性能
三、sprites适合推荐小结网站
通常此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。好比小局部布局小图标背景、小导航背景等CSS布局。url
3、css sprites优点与缺点劣势判断选择
一、sprites优点：spa
若干小图标拼合成一张图后布局，减小http iis请求数，对于大战大流量网站来讲隐形优点很显然的，从而隐形地提高了网站性能。对于大流量网站来讲原本http请求数比较宝贵，使用CSS Sprites这样能够大大的提升了页面的性能，这是CSS Sprites最大的优势，也是其被普遍传播和应用的主要缘由，同时也减小图片文件数目。
二、sprites缺点
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现没必要要的背景，若是留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的状况;
CSS Sprites在开发的时候比较麻烦，你要经过photoshop(PS)或其余工具测量计算每个背景单元的精确位置，这是针线活，没什么难度，可是很繁琐;
CSS Sprites在维护的时候比较麻烦，sprites是通常双刃剑，若是页面背景有少量改动，通常就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，若是在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增长了，由于每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，并且从新算图片的位置（尤为是这种上千px的图）也是一件颇为不爽的事情
因为图片的位置须要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
三、推荐小结
因为拼接图片须要必定经验技巧（作实践便可快速掌握）、测量定位数值、修改不是那么灵活等缘由，通常小网站站、小流量网站、通常企业网站不是很推荐使用CSS Sprites，由于使用CSS Sprites会比普通单个背景图片布局要耗费时间和精力，因此不是很推荐小站。但这个布局技巧也必需要学会掌握灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优点反而会浪费宝贵时间。相反大网站大流量网站推荐使用，这样比较值得。
4、css sprites实例示例教程
一、素材与要实现效果截图
二、sprites实例教程解释介绍
首先这些图标素材是放在同一张图片上（PS拼合），而后实现成列表类布局，列表每一个前图标不一样。使用css sprites实现此布局（其实使用background样式实现）。
首先此列表布局咱们使用ul li列表布局，每一个li站一行排版，对ul设置padding实现四周内容与边框必定间距效果，由于每一个li前面图标不一样，但此背景图片是拼合在一张图片上，因此这里作li里开始使用span标签实现这个不一样图标效果，每一个图标不一样为了区别span因此对span设置不一样class，不一样class对应设置定位相应的图标。
三、实例教程准备
1）、初始化模板使用：为了兼容各大浏览器，仍然这里使用网站提供初始化模板，在此模板基础上修改设置符合本实例CSS样式。
2）、图标素材，这里直接为你们提供拼接好的图标素材图片一张，命名为“ico.png”，以下图，可直接另存为保存使用。
四、先布局出效果，再css sprites设置不一样背景图标样式
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>
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}
效果截图
css sprites关键代码与解释
首先对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有两个数值能够为正能够为负，当为正数时，表明背景图片做为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片；当为负数时表明背景图片做为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。
CSS sprites技巧技术总结
CSS sprites其实就是对CSS背景background样式的扩展应用，之前设置背景background-position常见为正数值，设置背景靠左靠上距离多少像素开始显示图片，为负数值后，是将图片拖离左边上边多少像素开始显示图片，下载本案例屡次修改修改数值，观察观察能找到规律很快就会做为此技巧，同时学会PS切片工具获取距离值。
原文地址：http://www.manongjc.com/article/886.html