前端女娲补天 CSS（五） 什么是雪碧图

什么是雪碧图

雪碧图（sprites）将网页中能够用到的一些图片整合到一张图片中，再使用背景图片属性定位需要的图片内容。

这个是虚假的雪碧图

雪碧图用到的属性

width，height（容器宽度）
background-image
background-repeat（设置为no-repeat）
background-position（left，top的像素或百分比定位）进行背景定位
background-size（x，y像素或比例大小）一般是长宽等比例缩放
进行设置

雪碧图的优点

减少图片http请求，只需要进行一次http请求就能获取图片，提高页面性能
减小图片大小，一张合成雪碧图大小小于多张图片。

雪碧图的缺点

可维护性差。要让一张图片新增修改或减少部分内容比较麻烦。
图片体积较大时，可能会影响用户体验。需要加载完一整张图片才能对页面图片进行渲染，可能耗时较长。