目的:为了减少http网络请求,节约时间成本。加速内容显示
使用场景: 1.静态图片,不随用户的变化而变化
2.小图片,图片容量比较少
3.加载量比较大
如果大图不建议使用雪碧图
自动生成工具:CssGaga(可惜linux是不能用的)
https://www.toptal.com/developers/css/sprite-generator(自动生成的网站)
使用方法:
li i{
background: url(./sidebar.png);
display:inline;
width: 30px;
height: 24px;
float: left;
}
.cat{
width: 150px;
background: #f8f8f8;
border:1px solid #bbb;
}
.cta-1 i{
background-position: 0 0;
}
.cta-2 i{
background-position: 0 -24px;
}
.cta-3 i{
background-position: 0 -48px;
}