CSS Sprites在国内被很多人称为CSS精灵。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。因为,图片越多请求次数越多,造成延迟的可能性也就越大。
CSS Sprites的原理是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
CSS Sprites的实现原理与Photoshop的剪切蒙版相似。剪切蒙版是一个可以用其形状遮盖其他图稿的对象,因此使用剪切蒙版,您只能看到蒙版形状内的区域。假设我们要在一个设置好宽度与高度的div中显示一个小图标,但是小图标背景图是一张包含很多其他图标的大图。此时的div就相当于剪切蒙版的蒙版形状,而大图相当于被遮盖的图片,浏览器只能显示div区域内的背景图。那么,浏览器怎么知道div显示背景大图的哪个部分呢?由于在HTML中div的位置是确定的,我们可以以div的左上角为原点建立坐标轴,水平向右为x轴正轴,垂直向下为Y轴正轴,移动背景大图,是需要的区域显示在div中,此时背景大图左上角在坐标中的位置就是backgroud-position的值。注意,使用CSS Sprites一定要加background-repeat: no-repeat 。
div{
width: width;
height: height;
background: url(image.png) no-repeat X Y;
}