【上海校区】 专攻小班JS前端培训
当前位置:  主页 > 前端动态 >

前端中的css雪碧图

2019-04-23/11:04:03

css雪碧图

雪碧图 又叫精灵图 英文css sprite,就是一张图片上有很多的小图片,这种图片就是雪碧图

比如:一张图片上有4个小图 这种图就是雪碧图

图片3.png

要使用这种图片 需要用到背景定位技术 background-position 来使用图片中的 小图

图片4.png 

 

使用雪碧图的优点:

1. 对于设计师而言,减少文件命名,减少图片文件数量

2. 便于更换风格,可以实现换一张图  达到换多张小图的效果

3. 一张图片在 在浏览器里面  会请求一次,3张图片在浏览器会请求3

  很明显一张图片请求的数量要少,这样让网页加载速度更快,所以最后总结

  减少请求,增加网页的载入速度