【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='/images/loading.gif' data-original=""/>设置的图片，是不能合并到大图的，如果合并这些图片会影响页面可读性，语义化降低且可调整的范围小。
[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一定要事先确定好小图标的大小，否则后期维护时会非常麻烦
原标题：前端工程师技能之photoshop巧用(从效果图到雪碧图)5——理论篇
关键词：前端
我知道了 