<button class="u-btn">点我</button>
.u-btn{background: url(images/btn.png) no-repeat 0 0 ;} .u-btn{background: url(images/sprite.png) no-repeat 0 -50px;}
图片合并方案
什么是Sprite拼图：
Sprite拼图好处：
减少网络请求，提升网页加载速度
图片优化合并
平衡与取舍
压缩工具
- 无损 Minimage
- 有损 TinyPng
合并-排列
图片之间必须保留空隙
图片排列方式
- 横向排列
- 纵向排列
合并-分类
把同属于一个模块的图片进行合并
把大小相近的图片进行合并
把色彩相近的图片进行合并
综合以上方式合并
合并推荐
只本页用到的图片合并
有状态的图标合并
浏览器兼容方案
- IE6不支持PNG24半透明 (存2份 : sprite.png 24 sprite_ie.png 8 )
- CSS3 & 切图
开始做，坚持做，重复做
