CSS Sprites如是说
Css sprites 可译者为css恶魔，也没人译者为css希伯尼安斯，即使sprite也有希伯尼安斯的原意。在亚洲地区生活习惯成他为相片资源整合掌控技术，说出来那个称谓也是满直白的，即使他的确是数张相片资源整合为勒维尼县相片的掌控技术，为何要把数张图资源整合到两张上呢，这种做有甚么益处呢？即使如此一来，当您出访该页面时，写入的相片就不能像从前那般两幅两幅地渐渐表明出了。
CSS Sprites基本原理
Css sprites是将数张零碎的左上方片资源整合到两张左上方上，接着透过background-position来修正大背景的边线，那个这时候你要保证采用该张恶魔图的罐子要比左上方片小才是OK的，要不然很难JGD5其它的左上方片，因此特别要掌控好箱子的大小不一；其二，你还须要特别注意手写大背景功能定位的这时候极绝大多数都是负的，水准为正数，相片才会往右侧移位，因此才会表明出你须要的那部份左上方，横向路径也是反之亦然。当数个箱子提及两张大背景图时，只须要发生改变大背景功能定位就能发生改变页面中的表明部份为哪一部份左上方，这种做的目地是为的是减少应用程序向伺服器的允诺单次，如此一来能大大减少页面的读取速率。
CSS Sprites优劣
CSS Sprites 的优点：
1、利用CSS Sprites能够减少应用程序向伺服器的允诺单次，减少http允诺，从而提高页面的性能，这是相片恶魔的最显著特点，也是被广泛应用的主要原因。
2、利用相片恶魔还能减少相片的字节，你采用9张小的相片，两张4KB，9张是36KB，而把他们都放两张相片上，只须要4KB到5KB就可，因此减少相片字节也是显而易见的。
3、在整理相片的过程中，不须要再纠结如此大量相片的名字问题，数张放在两张上，只须要取一个综合的名字就能了，如此便提高了工作效率。
4、如果想发生改变网站风格，你只须要处理两张相片就能了，把两张相片的颜色和风格一改，那么整个网站的风格就都变了，便于后期的维护和修改。
CSS Sprites 的缺点：
1、在应用恶魔相片的这时候，你须要考虑当前箱子会不能JGD5其它的左上方，那个还好，比较头疼的是，页面自适应时，左上方的边线就没那么难掌控了。
2、制作恶魔图的过程比较繁琐，你须要处理好每张图之间的距离和边线，如果做得不合理，那么采用出来就比较麻烦了，甚至须要单独创建一个空的箱子来装左上方。
3、采用恶魔图的页面后期维护带来了繁琐，即使他是数张图在两张图上，牵一发而动全身的感觉，你发生改变两张左上方，如果大小不一发生变化，那么其它的你就得动，只要你动了，那么所有的大背景功能定位都将须要发生改变，因此一旦须要更改左上方的话，轻易不要发生改变其它相片的边线，原位能放下就在原位改，放不下就在下面添加。
CSS Sprites的采用
1、如果你的恶魔图是整整齐齐的一竖排或者一横排，并且每一个左上方的尺寸都是一致的，那么你就幸运了，即使这种我们就不须要对每一个被那个图的边线都进行测量了，比如这张左上方：
他实现的页面效果是和它等尺寸的一个小导航：
其中灰色为当前状态，橘色为鼠标以上的状态，那个恶魔图是个合理整齐的恶魔图，代码手写出来也会方便很多，至少不须要每一个都进行测量，代码如下：
基本结构：
相关样式：
2、如果导航是横着的，那么恶魔图最好都制作成竖向排列的，除非你的导航和大背景相同尺寸，像如上案例，如果你没有做成竖向的，而做成了横向，那么你就须要一个单独的箱子来装左上方了，没办法采用padding-left来挤出大背景的边线了，即使内容区也是支持大背景的，请看那个左上方：
这张图不仅横向排列，而且周围多出很多空余的区域，这就会给前端带来很多的麻烦，这张图要实现的目标效果是：
看似很简单的页面，可是代码却比正常多出很多：
基本结构：
里面不得不采用一个span来装左上方；
相关样式：
单独对span进行定义样式。
3、恶魔图也会经常和滑动门一起采用，那个这时候你就须要特别注意了，同时编辑两个相片的边线关系，看下面页面效果：
采用的是下面两张恶魔图：
那个这时候你鼠标移上就须要发生改变两个大背景功能定位了，特别特别注意子箱子的水准边线，代码如下：
基本结构：
相关样式：
鼠标移上要同时发生改变两个标签的左上方片。
总结：在恶魔图的采用过程中，精灵图做的标不标准就决定于页面手写的难易程度，因此说一个整齐规范的恶魔图采用出来也是很舒服的。
这里再给大家陈列几张常见的恶魔图：
这张恶魔图实现的页面效果是：
这也是个不错的恶魔图，采用出来方便快捷。
第二组是名鞋库里面的恶魔图：
第两张采用出来就要比第二张方便的多。
还有这些：
这些都是恶魔图，是用来手写鼠标以上的酷炫效果的，恶魔图不见得非得弄很多很多的图，太多了反而会增加负担，增加手写页面的负担，增加页面读取的负担。
