目录
产生原因
原理
使用原则
使用方式
优缺点
优点
缺点
产生原因
当用户访问网站,需要向服务器发送请求,网页上每张图像都要经过一次请求才能展现给用户。故若一个网页背景应用多张细碎图像,图像过多情况下,服务器会频繁接受和发送请求,导致降低网页加载速度,影响服务器效率。为了解决此问题,css精灵技术随之产生。
原理
css精灵技术将网页中的细碎零星图像整合到一张大图中,再将大图应用于背景。如此,当用户访问页面,只需向服务器发送一次请求,图像便可全部显示。通常情况下,这个由许多小的背景图像整合成的大图被称为精灵图。
使用原则
1、背景图像很少的情况下,不必要使用精灵技术,维护成本高
2、精灵图上放的是小的装饰性质的背景图像,插入图像不能放上去使用
3、精灵图的宽度取决于最宽的背景图像
4、精灵图可以横向或者纵向摆放
5、使用background属性可以精确定位精灵图中某个小图
使用方式
1、测量位置。测量所需图片在整张精灵图上的位置,测其x、y轴方向
2、使用background属性引入精灵图中的小图,确定好其位置,以便于之后使用时精确定位
优缺点
优点
1、减少网页对服务器的请求,提高网页加载速度,提高服务器效率和网页性能
2、减少图片字节。通常多张图片合成精灵图的字节小于单张图片的字节总和
缺点
维护较难,维护成本高。当页面背景图片有改动,当图片改动大时,可能需要对整张精灵图进行重新页面布局