HTML5+CSS3基础之CSS Sprites（CSS精灵）

时间：2023-07-06 15:30:02 | 来源：网站运营

时间：2023-07-06 15:30:02 来源：网站运营

HTML5+CSS3基础之CSS Sprites（CSS精灵）：

CSS Sprites介绍

Css sprites 可翻译为css精灵，也有人翻译为css雪碧，因为sprite也有雪碧的意思。在国内习惯成他为图片整合技术，说起来这个称呼也是满贴切的，因为他确实是多张图片整合为一整图片的技术，为什么要把多张图整合到一张上呢，这样做有什么好处呢？因为这样的话，当您访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

CSS Sprites原理

Css sprites是将多张零散的背景图片整合到一张背景图上，然后通过background-position来调整背景的位置，这个时候你必须确保使用该张精灵图的容器要比背景图片小才是OK的，不然很容易漏出其他的背景图片，所以尤其要控制好盒子的大小；其次，你还需要注意书写背景定位的时候极大多数都是负的，水平为负数，图片才会往左侧平移，所以才会显示出你需要的那部分背景图，垂直方向也是同理。当多个盒子引用一张背景图时，只需要改变背景定位就可以改变页面中的显示部分为哪一部分背景图，这样做的目的就是为了降低浏览器向服务器的请求次数，这样一来可以大大提高网页的加载速度。

CSS Sprites优缺点

CSS Sprites 的优点：

1、利用CSS Sprites能够减少浏览器向服务器的请求次数，减少http请求，从而提高页面的性能，这是图片精灵的最显著特点，也是被广泛应用的主要原因。

2、利用图片精灵还能减少图片的字节，你使用9张小的图片，一张4KB，9张就是36KB，而把他们都放一张图片上，只需要4KB到5KB就可，所以减少图片字节也是显而易见的。

3、在整理图片的过程中，不需要再纠结如此大量图片的名字问题，多张放在一张上，只需要取一个综合的名字就可以了，如此便提高了工作效率。

4、如果想改变网站风格，你只需要处理一张图片就可以了，把一张图片的颜色和风格一改，那么整个网站的风格就都变了，便于后期的维护和修改。




CSS Sprites 的缺点：

1、在应用精灵图片的时候，你需要考虑当前盒子会不会漏出其他的背景图，这个还好，比较头疼的是，页面自适应时，背景图的位置就没那么容易掌控了。

2、制作精灵图的过程比较繁琐，你需要处理好每张图之间的距离和位置，如果做得不合理，那么使用起来就比较麻烦了，甚至需要单独创建一个空的盒子来装背景图。

3、使用精灵图的页面后期维护带来了繁琐，因为他是多张图在一张图上，牵一发而动全身的感觉，你改变一张背景图，如果大小发生变化，那么其他的你就得动，只要你动了，那么所有的背景定位都将需要改变，所以一旦需要更改背景图的话，轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。

CSS Sprites的使用

1、如果你的精灵图是整整齐齐的一竖排或者一横排，并且每一个背景图的尺寸都是一致的，那么你就幸运了，因为这样我们就不需要对每一个被那个图的位置都进行测量了，比如这张背景图：

他实现的页面效果就是和它等尺寸的一个小导航：

其中灰色为当前状态，橘色为鼠标以上的状态，这个精灵图就是个合理整齐的精灵图，代码书写起来也会方便很多，至少不需要每一个都进行测量，代码如下：

基本结构：

相关样式：

2、如果导航是横着的，那么精灵图最好都制作成竖向排列的，除非你的导航和背景相同尺寸，像如上案例，如果你没有做成竖向的，而做成了横向，那么你就需要一个单独的盒子来装背景图了，没办法使用padding-left来挤出背景的位置了，因为内容区也是支持背景的，请看这个背景图：

这张图不仅横向排列，而且周围多出很多空余的区域，这就会给前端带来很多的麻烦，这张图要实现的目标效果是：

看似很简单的页面，可是代码却比正常多出很多：

基本结构：

里面不得不使用一个span来装背景图；

相关样式：

单独对span进行定义样式。

3、精灵图也会经常和滑动门一起使用，这个时候你就需要注意了，同时编辑两个图片的位置关系，看下面页面效果：

使用的是下面两张精灵图：

这个时候你鼠标移上就需要改变两个背景定位了，尤其注意子盒子的水平位置，代码如下：

基本结构：

相关样式：

鼠标移上要同时改变两个标签的背景图片。

总结：在精灵图的使用过程中，精灵图做的标不标准就决定于页面书写的难易程度，所以说一个整齐规范的精灵图使用起来也是很舒服的。

这里再给大家陈列几张常见的精灵图：

这张精灵图实现的页面效果是：

这也是个不错的精灵图，使用起来方便快捷。

第二组是名鞋库里面的精灵图：

第一张使用起来就要比第二张方便的多。

还有这些：

这些都是精灵图，就是用来书写鼠标以上的酷炫效果的，精灵图不见得非得弄很多很多的图，太多了反而会增加负担，增加书写页面的负担，增加页面加载的负担。