【南大软院大神养成计划】Css Sprite——雪碧图运用

通常网站导航栏或登录框会见到一些小的图标，而这些图标如果用<Iimg>标签来实现，但这就会增加了网站的显示负担和http请求数目，从而增加了运行成本。这是便可以通过css sprite来解决这个问题。

对于css spirte，就是将众多的小图片拼装成一个大图片，通过对背景图片的坐标调试来实现所需小图片的显示（注意：坐标为负值）。

标签主要包括：

  <i></i>

  li i{background:url()}

  .cat-1{background-position:x x}

Css Sprite 使用要求：

  1.静态图片，不随用户信息改变而改变

  2.图片容量比较小

  3.加载量比较大

 

同时，值得注意的是并不是所用的图片都是做成雪碧图的方式好，对于一些较大的图片或js的动态图片，做成雪碧图的话对于css的修改会比较繁琐，所以还是应该使用<img>标签来实现。

 2015 11 19

mooctomato