CSS Sprites技术关键在于将多张小图片合并为一张大图片,通过CSS的background-position属性来切换显示不同的小图片。这样可以减少页面请求次数,加快页面加载速度,提升用户体验。
.icon { width: 20px; height: 20px; background-image: url(sprites.png); } .icon-home { background-position: 0 0; } .icon-search { background-position: -20px 0; } .icon-cart { background-position: -40px 0; }
在上面的例子中,我们使用了一个20x60像素的图片sprites.png,包含了3个20x20像素的小图片(home、search、cart)。可以看到,在.icon类中,我们设置了图片的宽度和高度,同时指定了背景图片的地址。在.icon-home、.icon-search、.icon-cart类中,我们利用background-position属性,分别将小图片的位置设置为0 0、-20px 0、-40px 0。这样,当我们在HTML中使用.icon类时,就可以轻松地对应到每个小图片,并且只需要加载一张大图片。