【CSS-task7】CSS sprites 应用
小课堂【上海第三期】
分享人：孙伟淳
目录
1.背景介绍
2.知识剖析
3.常见问题
4.编码实战
5.扩展思考
6.参考文献
1.背景介绍
在网页制作中，往往需要添加网站的logo，一些个性化的小图标等图片，使网页更加个性化，视觉效果更加美化。但是诸多图片的加载，会引起浏览器加载时间的延长，对于浏览器性能及用户体验而言不是很好。于是乎，我们的前辈们就创造了一个解决这个问题的方法，就是Css Sprites。
天猫上某个时期的导航栏
上方导航栏使用到的sprites图片
2.知识剖析
CSS Sprites，直译过来就是CSS精灵，是一种CSS图像合并技术。它是将网站上要用到的一些图片从设计的PSD图片中切出来，然后使用软件整合到一张单独的图片上，然后利用css的背景定位（background-position)属性，键入相应的坐标值显示特定的图片。
使用特点：(1)利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
(2)减少了图片的存储容量，降低图片占用的字节。
3.常见问题
在图片进行背景定位显示时，background-postion后的坐标值跟一般认为的数值不同，往往是通过负值来进行坐标的移动定位。例如background-postion：-50px -50px;前一个“-50px”是在从图片的左上角开始向右水平移动50px,后一个“-50px”是向上垂直移动50px。在使用中希望大家注意。
4.编码实战
5.扩展思考
(1)Css Sprites使用时有哪些缺点？
(2)background-position的值使用百分比坐标时如何实现图片的定位?
6.参考文献
参考一：CSS精灵技术（就是我们常说的，雪碧图，CSS Sprites）
鸣谢
感谢大家观看
BY : 沁修|高雪峰|孙伟淳