前端工程师技能之photoshop巧用(从效果图到雪碧图)

2678777127

【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,如果是横向平铺的，只能将所有横向平铺的图合并成一张大图，只能竖直排列，不能水平排列；如果是纵向平铺的，我们只能将所有纵向平铺的图合并成一张大图，只能水平排列，不能竖直排列。

file:///F:/1%E9%AB%98%E5%BC%95%E8%88%AA%E5%B7%A5%E4%BD%9C%E6%96%87%E4%BB%B6/2017.6/%E9%87%91%E7%A6%BE%E5%BD%B1%E8%A7%86/%E5%88%87%E5%9B%BE/images/1r43l537-0.jpg

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

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

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