html-雪碧图或精灵图

发表于

​ 网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置。 

1
2
3
4
5
6
<style>
    .icon1{background-position: 0 0;}
    .icon2{background-position: -40px 0;}
    .icon3{background-position: 0 -25px;}
    .icon4{background-position: -40px -25px;}
</style>