雪碧图 是利用css 的一种图片合成技术, 它使用的主要是background 和background-position 两个属性,调整背景图片的位置,在不同的地方显示不同的图片。
雪碧图最常应用于网页中的一系列图标,logo等,当一个页面中的图标数量很多时,我们可以考虑将所有图标合成一张大图片,即雪碧图,通过background-position调整可以显示这张大图片的不同部位。例如下面这张雪碧图,
(sprite.png,每个图标的宽是30px,高是24px)
下面的代码是应用雪碧图
<span style="white-space:pre"> </span>li i{
<span style="white-space:pre"> </span>background: url(sprite.png);
<span style="white-space:pre"> </span>display: inline;
<span style="white-space:pre"> </span>width: 30px;
<span style="white-space:pre"> </span>height: 24px;