CSS Sprites原理。CSS Sprites基本思路是第一把网页中需要用到的大小一致、背景透明等特质的小图片整理到一张图片文件中。 然后再借助background-image、background-repeat、background-position或者background等CSS属性进行背景定位,其中background-image属性用于设置元素背景图片地址,background-repeat属性用于设置背景图片是不是平铺,background-position属性用于定位背景图片的坐标原点地方,最后通过引用CSS样式,使整理图片中不同地方的小图片以背景的形式显示在元素内。
因为整理图片的总体面貌没发生变化,只不过调整了图片的显示地区。就好比打字机中雕刻字带上的数字,可以参考需要灵活调整目前打印的数字,其它非目前数字只不过被移动了地方。当多个大小相同的元素引用同一个背景图时,仅需从服务器下载一次背景图片文件,然后再通过background-position属性从背景图片中定位选取需要显示的那一部分背景图,减少了浏览器向服务器的请求次数,提升了网页的加载速度。