雪碧图的使用场景:
1,静态图片,不随用户信息的变化而变化
2,小图片,图片容量比较小
3,加载量比较大
为什么要用雪碧图:有效的减少http请求数量,加速内容显示;
为什么说减少http请求,可以加速内容显示
每请求一次,就会和服务链接一次,建立链接需要额外时间的
可以尽量减少http请求的数量,达到优化的效果
不推荐使用雪碧图的地方:
一些大图不建议拼成雪碧图 如果用大图拼成雪碧图的话,加载的慢,反而达不到显示快的效果
css Sprite(雪碧图)的实现原理:
通过css background-position这个属性来控制的,通常来讲我们设置一个区域的背景图,然后来控制背景图的位置,来实现这个功能
拼合背景图的小图(x,y)为负值,以左上角的顶点为(0,0)坐标的,当我们需要对坐标系中一个区域进行展示的时候。
雪碧图的实现方式:
PS手动拼图(小的网站,自己可以动手拼图)
使用sprite工具自动生成(大型网站)
CSS sprite 自动生成工具------CssGaga是windows环境下,快速生成雪碧图的工具,这款工具除了帮我们生成雪碧图之外,还会把background-position的代码写好
网上有安装和配置都有(需要大量的配置,说明很详细)样式
注意:每个标签都有自己默认的margin和padding;每次都要清除默认样式的原因,自己设置样式的原因是,保证在各个浏览器下的展示效果相同
作者:哈哈腾飞
链接:http://www.jianshu.com/p/18051247c22c
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。