你的位置:首页 > 网页设计

[网页设计]前端工程师技能之photoshop巧用(从效果图到雪碧图)5——理论篇


 

【css sprite】

【定义】css sprite是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中

【优点】
  [1]减少http请求次数
  [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度)

【缺点】
  [1]提高开发成本
  [2]提高维护成本

【补充】(浏览器对并行网络请求有个数限制)
        http1.1(持久保持)       http1.0(短暂保持)
  IE6、7     2                4
  IE8        6                6
  firefox     6                 6
  chrome     6                 6

【应用场景】:它能合并的只能是用于背景的图片
  [1]对于<img src=""/>设置的图片,是不能合并到大图的,如果合并这些图片会影响页面可读性,语义化降低且可调整的范围小。
  [2]对于横向和纵向都平铺的图片,也不能使用css cprite,如果是横向平铺的,只能将所有横向平铺的图合并成一张大图,只能竖直排列,不能水平排列;如果是纵向平铺的,我们只能将所有纵向平铺的图合并成一张大图,只能水平排列,不能竖直排列。


【计算方法】
  [1]因background-position代表图片的起始位置,从左上角开始,x轴向右为正,y轴向下为正。故一般sprite值均为负值
  [2]background-position的计算是指0点到图片左上角的偏移
  [3]left:背景图左侧对齐元素左侧; right: 背景图右侧对齐元素右侧; center: 背景图中间对齐元素中间

【浏览器兼容方案】:IE6不支持PNG24半透明
  [1]处理方法1
    [a]给高级浏览器存一份sprite.png 24
    [b]给IE存一份带背景切的sprite_ie.png 8
  [2]处理方法2
    [a]高级浏览器用css3
    [b]低级浏览器用切图+hack来处理
  [3]处理方法3:优雅降级

【注意事项】
  [1]一个元素既有背景图像又有背景颜色时,背景颜色一定要写成background-color,如果写成background会覆盖背景图像的属性
  [2]使用css精灵处理icon一定要事先确定好小图标的大小,否则后期维护时会非常麻烦