今天做的事情：

将任务图片全部制作成雪碧图。

一、雪碧图使用条件：

1、静态图片，不随用户信息的变化而变化；

2、小图片，图片容量比较小；

3、加载量过大；

ps：一些大图不建议拼成雪碧图。

二、雪碧图的优势：

有效的减少http请求数量，加速内容显示。

三、雪碧图的实现原理：

通过background-position属性控制雪碧中的小图偏移，整张雪碧图以左上角为原点（0，0）；坐标轴是以向右的正x轴和向下的正y轴组成，图片显示在原点区域，因此控制小图的偏移值（x，y）应取负值（即让小图向原点移动）。

四、雪碧图的实现方式：

1、ps手动拼图（当图片使用量过大时，由于每次都要计算每张图的偏移值，过程繁琐）；

2、使用sprite工具自动生成（例如：CSSgaga或其他在线合成工具）；

五、雪碧图应用时的注意事项：

1、大小设置：在使用时，background-size会整体放大所有图片，会使当前的偏移值重新计算，所以为了避免此类情况，在缩放过程中，用transform: scale(x,y);进行处理；

2、刚开始使用，其他注意事项暂不得知。

明天做的事情：

或要外出暂无计划

遇到的困难：

1、在学习雪碧图的过程中，看到又争论到底是用<i>还是<span>来放置小图标的，刚开始还是以为 i，即icon，结果不是，只是用来表示斜体文本的，但因为在国内基本就是弃置的，和icon比较像，然后存放图标又不需要写入文本，所以在阅读设备读入时为空标签，被忽略，所以看起来还是挺符合，最为关键的是，较之span相比，短了不少。但是另一方面，这毕竟不符合语义化标签，况且在又看网友说，bootstrapv2.0中使用的是<i>但是在v3.0中又全部改用<span>了，好吧，作为小白这种仁者见仁智者见智的东西，只能交给上面的人去争了，我觉得还是遵守标准来的好一点；

2、就是雪碧图缩放问题，之前提到了，已经解决，但不得不说，这真是个大坑， 一开始还以为自己的图有问题，实际上除了又位置偏移量，和平常图片并无差别，最关键的是，合成工具基本都会自动计算出偏移量。

收获：

努力让自己成为一个严谨的人。。。