【前端自学之路】CSS之雪碧图spirit

什么是雪碧图

雪碧图(css spirit)是由一系列小图片合成而成的一张大图,见如下(这是网络获取的一张图)

css spirit

雪碧图的作用是什么?

雪碧图是由多个必须的图标图片合成一张大图,极大的减少HTTP请求次数,提升前端性能

如何使用雪碧图

1
2
3
background: url(雪碧图图片地址) no-repeat; 

background-position: 10px 10px;

通过 background 相关属性去雪碧图上截图需要的小图标

坚持原创技术分享,您的支持将鼓励我继续创作!