前端工程师技能之photoshop巧用(从效果图到雪碧图)
【css sprite】【定义】css sprite是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中【优点】减少http请求次数
减少图片大小，提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度)【缺点】
提高开发成本
提高维护成本【补充】(浏览器对并行网络请求有个数限制)
http1.1(持久保持) http1.0(短暂保持)
IE6、7 2 4
IE8 6 6
firefox 6 6
chrome 6 6【应用场景】:它能合并的只能是用于背景的图片
对于<img src=""/>设置的图片，是不能合并到大图的，如果合并这些图片会影响页面可读性，语义化降低且可调整的范围小。
对于横向和纵向都平铺的图片，也不能使用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
【计算方法】
因background-position代表图片的起始位置，从左上角开始，x轴向右为正，y轴向下为正。故一般sprite值均为负值
background-position的计算是指0点到图片左上角的偏移
left:背景图左侧对齐元素左侧； right: 背景图右侧对齐元素右侧； center: 背景图中间对齐元素中间【浏览器兼容方案】:IE6不支持PNG24半透明
处理方法1
给高级浏览器存一份sprite.png 24
给IE存一份带背景切的sprite_ie.png 8
处理方法2
高级浏览器用css3
低级浏览器用切图+hack来处理
处理方法3:优雅降级【注意事项】
一个元素既有背景图像又有背景颜色时，背景颜色一定要写成background-color,如果写成background会覆盖背景图像的属性
使用css精灵处理icon一定要事先确定好小图标的大小，否则后期维护时会非常麻烦
页:
[1]