CSS 雪碧图

2018-01-20 本文已影响1267人 7天苹果

1、什么是雪碧图？
2、为什么使用雪碧图？
3、什么情况下适合使用雪碧图？
4、雪碧图怎么使用？
5、雪碧图是怎么做成的？
6、雪碧图有什么缺点？

1、百度百科对CSS 雪碧的解释如下：

CSS雪碧即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

往往将小图标合并在一起之后的图片称作雪碧图，主要用在小图标显示上。

2、不使用雪碧图，单纯调用小图片有以下优缺点：

优点：调用简单、维护方便；
缺点：在我们使用很多小图片的网页上，比如网站上的表情图面板等，每个小图标都单独调用一图片，即意味着每个小图标的显示都产生一个HTTP请求；一般情况下每次创建一个HTTP请求，请求到的内容往往是次要的（除非文件特别大），性能开销主要在请求、以及响应阶段；如果请求文件过多则会引发性能问题。

3、静态图片，图片不随用户信息的变化而变化。小图片，容量比较小的（2~3k）。图片加载量比较大的。注意：大图片不建议用雪碧图咯，图片那么大，拼完之后就更大了，加载就慢了。

4、将雪碧图作为背景，然后使用background-image和background-position两个属性来控制需要显示的部分，所以我们只要对这两个属性的使用掌握熟悉了就可以。
推荐文章和练习网站：
http://blog.csdn.net/bingkingboy/article/details/51059209
http://www.imooc.com/code/1511%E3%80%82

6、雪碧图的缺点：

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。