前端工程师技能之photoshop巧用(从效果图到雪碧图)5--理论篇_html/css_WEB-I

【css sprite】

【应用场景】:它能合并的只能是用于背景的图片
　　[1]对于 设置的图片，是不能合并到大图的，如果合并这些图片会影响页面可读性，语义化降低且可调整的范围小。
　　[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--理论篇_html/css_WEB-I的详细内容...