CSS雪碧拼图
一 定义 其实就是把网页中一些背景图片整合到一张图片文件中 , 在利用CSS的”background-image” , “background-repeat” , “background-position”的组合进行背景定位访问图标 二 优点 1 1+1 < 2 图标放在一起 , 可以令图标的总容量稍小一点 2 让连接次数大量减少 对于web服务器上的每个独立资源 , 都需要去连接和获取 , 所有大家都设法将很多图标放在一个图片上 , 连接一次就全部取回来 3 让浏览器将图标预先下载 浏览器为了尽快地显示页面 , 一般只是将打开页面时用到的图片下载到本地 , 而一些可能用到 , 但没有立刻被用到的图片需要在应用的时候再进行下载 三 缺点 1 图片难以管理 , 难以定位 如果你要更换一个图标 , 那么你需要编辑整个大图片 , 如果你要改变一个图标的大小 , 很可能你需要重新计算它的位置 , 甚至无从下手 , 只能在别的位置再添加一个图标 2 2 > 1 两个图标合成的图片是肯定比其中一个图标独占的图片大的 , 也就是说 , 下载这个图片所需的时间将比单独一个图标用的时间长 浏览器显示图片一般都是下载完则显示或者边下载显示的 , 如果你那几个图标组成的图片容量比较大 , 那么他们不能逐个显示于用户 , 会造成很不好的用户体验 四 实现方式 1 PS手动拼图 适合小网站