css精灵图(雪碧图)
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。
使用雪碧图的优点有以下几点:
将多张图片合并到一张图片中,可以减小图片的总大小
将多张图片合并到一张图片后,只需一次网络请求就可以将所需的资源全部下载,减小建立连接的消耗,在移动端尤为明显
示例
html样式
1.我们用p标签做为雪碧图的容器

2.给p标签设置css样式
通过background-position调试精灵图中想要展示的目标图片
OVER!!!