关闭

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

标签: 前端开发
232人阅读 评论(0) 收藏 举报

通常网站导航栏或登录框会见到一些小的图标,而这些图标如果用<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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1207次
    • 积分:89
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档