CSS雪碧拼图

一 定义

 其实就是把网页中一些背景图片整合到一张图片文件中 , 在利用CSS的”background-image” , “background-repeat” , “background-position”的组合进行背景定位访问图标

二 优点

1 1+1 < 2

   图标放在一起 , 可以令图标的总容量稍小一点 

2 让连接次数大量减少

  对于web服务器上的每个独立资源 , 都需要去连接和获取 , 所有大家都设法将很多图标放在一个图片上 , 连接一次就全部取回来

3 让浏览器将图标预先下载

  浏览器为了尽快地显示页面 , 一般只是将打开页面时用到的图片下载到本地 , 而一些可能用到 , 但没有立刻被用到的图片需要在应用的时候再进行下载

三 缺点

1 图片难以管理 , 难以定位

   如果你要更换一个图标 , 那么你需要编辑整个大图片 , 如果你要改变一个图标的大小 , 很可能你需要重新计算它的位置 , 甚至无从下手 , 只能在别的位置再添加一个图标

2 2 > 1

    两个图标合成的图片是肯定比其中一个图标独占的图片大的 , 也就是说 , 下载这个图片所需的时间将比单独一个图标用的时间长
    浏览器显示图片一般都是下载完则显示或者边下载显示的 , 如果你那几个图标组成的图片容量比较大 , 那么他们不能逐个显示于用户 , 会造成很不好的用户体验

四 实现方式

1 PS手动拼图

    适合小网站  ,图标不是很多的时候使用

2 使用sprite工具自动生成

   CssGaga : 一款自动化网页设计工具集合软件(该软件只能在Windows环境下运行)
            利用它能快速生成雪碧图及对应的background-postition代码 , 还能进行
            Css格式化 , 将css进行压缩 , 去除多余的空格 , 换行 , 注释 , 并且
            进行兼容的优化

五 CssGaga注意事项

1 让图标尽量排列的有规律

   有规律地排放的图标更容易定位和维护
   这里的间隔可以使用16 , 32 , 48 , 96等标准尺寸

2 将背景颜色一致的图标放置在一起

   如果背景颜色不一样 , 最好分为两个或者多个图片放置
   特别是背景颜色相近的 , 很容易混淆

3 将相同栏目的图标放置在一起

   这样可以少写一些css代码 , 设置一个background , 再在每个设置background-position就行了

4 不要将大图绑在一起

   大图绑在一块影响页面加载速度 , 大部分用户都不会耐心地等待页面的所有文件被下载完成再进行阅读