CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。
加速的关键,不是降低质量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大
在研究css sprite的过程中,需要综合使用background-image、background-repeat、background-position三个属性来精确控制合成图片中的每一个图片。
假如合成图片是由m行n列组成的,并且第一个图片的position是0 0,那么为神马后面的每一行每一列的图片的position均是不大于0 0的呢,有谁知道其中的原理,还请不吝赐教。
找到原理了,通过下图去理解慢慢消化吧