CSS sprise


CSS sprise(CSS中的Sprite)css精灵,也叫CSS雪碧图
一种网页图片应用处理方式,给背景图片进行定位

.icon{background-image:url(/整图地址); background-repeat:no-repeat;width:;height:;}
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..

必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚。
 
什么是css sprite
    CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
 
为什么要用这个工具?
 
1.加快网页加载速度:浏览器接受的同时请求数是10个,如果图片过多会影响整体的视觉效果,而且对于不稳定的网络带宽,加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及加速页面渲染。
 
2.后期维护简单:该工具可以直接通过选择图片进行图片的拼接,当然你也可以自己挪动里面的图片,自己去布局你的雪碧图,直接生成代码,简单易用。
 
3.开源:该程序已经在github上开源,地址:https://github.com/iwangx/sprite


优点:
1、减少加载网页图片时对服务器的请求次数
2、提高页面加载速度
3、减少鼠标划过的一些bug
 
缺点:
1、最大不足就是内存使用问题
2、影响浏览器缩放功能
3、CSS编写困难
4、雪碧调用的图片不能被打印
5、错误使用Sprites影响可访问性
必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚。
 


Carpe Diem and Do what I like