使用背景图代码
HTML <button class = "u-btn">点我</button>
CSS .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
·合并
-排列
·图片之间必须保留空隙
对于具体要保留多大的空隙呢，并没有一个明确的数值，遵循的一个宗旨就是保留的空隙足够后期维护就可以了。
如果是小图标，留的空隙可适当小一些，一般20像素左右；那如果是大图标，要留的空隙就要大一点，因为大图标在调整的时候，影响到的空间也会比较大。
·图片排列方式
-横向排列
-纵向排列
-分类
·把同属于一个模块的图片进行合并
·把大小相近的图片进行合并
·把色彩相近的图片进行合并
·综合以上方式合并
合并推荐
·只本页用到的图片合并
·有状态的图标合并
浏览器兼容方案
·IE6不支持PNG24半透明
存2份：sprite.png 24
sprite_ie.png 8
·CSS3&切图
网友评论