精灵图
精灵图也称为雪碧图,为什么有精灵图呢?因为很多大型网页中加载的时候需要下载很多图片,这样对网络负担很大,因此精灵图把很多小图片合并到一张大图片中,这样加载的时候只会加载一张却能在好几个地方使用。
使用方式
精灵图在样式表中的background
background:url("图片的地址") left top;
left 和 top组合来调整 你想使用精灵图中某个图片的具体位置
当然也可以使用background-position来调整
background:bg-color(背景颜色) bg-image(背景图URL) position/bg-size(背景图的大小或者位置写在这里) bg-repeat(图片是否铺开) bg-origin( 指定背景图像的定位区域) bg-clip(指定背景图像的绘画区域) bg-attachment(设置背景图像是否固定或者随着页面的其余部分滚动。)
精灵图大小调整
background-size: ..px;
可以控制精灵图的大小