css sprite
2017-07-13 本文已影响23人
温柔你要送嘻嘻
目的：为了减少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;
}
