关键词：
前面的话
前面已经介绍过，描述性图片最终要合并为雪碧图。本文是photoshop巧用系列第五篇——雪碧图
定义
css雪碧图(sprite)是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点：
【1】减少http请求次数
【2】减少图片大小，提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度)
凡事都不完美，实现优点的同时也带来了缺点，即提高了网页的开发和维护成本。
应用场景
前面提到过，并不是所有的图片都可以用来制作雪碧图，只有描述性图片才适合
【1】对于img标签设置的内容性图片，是不能合并到雪碧图的，如果合并这些图片会影响页面可读性，语义化降低且可调整的范围小
【2】对于横向和纵向都平铺的图片，也不能合并到雪碧图中。如果是横向平铺，只能将所有横向平铺的图合并成一张大图，只能竖直排列，不能水平排列；如果是纵向平铺，只能将所有纵向平铺的图合并成一张大图，只能水平排列，不能竖直排列
合并
雪碧图的制作实际上就是零星小图合并成一张大图，但小图合并需要遵循以下规则：
【1】图片在合并之前必须保留空隙
1、如果是小图标，留的空隙可适当小一些，一般20像素左右
2、如果是大图标，要留的空隙就要大一点，因为大图标在调整的时候，影响到的空间也会比较大
【2】图片排列方式有横向和纵向
【3】合并分类的原则
有三种合并分类的原则，分别是基于模块、基于大小和基于色彩
a、把同属一个模块的图片进行合并
b、把大小相近的图片进行合并
c、把色彩相近的图片进行合并
【4】合并推荐
在实际的雪碧图制作中，一般采用两种方法：一种是只本页用到的图片合并；另一种是有状态的图标合并
实现
在以前，我们可能需要手动实现雪碧图，这是一件非常麻烦的且容易出错的事情。现在有了很多方便的工具来制作雪碧图。我经常使用是一个叫做css背景合并工具的小工具。
使用方法如下图所示：
维护
【放大画布】
图像 -> 画布大小<alt+ctrl+c> -> 选择定位位置(一般为左上角)
 |
 |
 |
【减小画布】
[注意]PNG8的颜色模式默认为索引颜色模式，在修改png8图片时需要更改其颜色模式为RGB模式，步骤为图像 -> 模式 -> RGB颜色
 |
 |
1、选择 图像 -> 裁切 选择基于左上角像素颜色，可以实现自动裁切的效果
 |
 |
 |
 |
2、先选定要保留的区域，然后选择 图像 -> 裁剪或者选择工具栏中的裁剪工具按钮进行裁剪
 |
 |
 |
【移动图标】
1、若图标为独立图层，则用移动工具拖动即可
 |
 |
2、若图标为非独立图层
a、先用选区工具选中图标区域，再用移动工具拖动图标，这样可以移动该图层
b、先用选区工具选中图标区域，再剪切<ctrl+x>，粘贴<ctrl+v>，可以将原来的图层分成两个图层，更有利于操作
 |
 |
 |
深入学习jquery选择器系列第五篇——过滤选择器之内容选择器
×目录[1]contains[2]empty[3]parent[4]has[5]not前面的话 本文介绍过滤选择器中的内容选择器。内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上 :contains(text) :contains(text)选择器选择含有文本内容为‘text‘的... 查看详情
mysql之存储引擎大全-《从0到1-全面深刻理解mysql系列-第五篇》
个人主页:IT学习日记版权:本文由【IT学习日记】原创、在CSDN首发公众号:【IT学习日记】一个只搞干货的公众号如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)、有任何问题欢迎私信,看到会及时回复!文章大纲一、前言二:... 查看详情
cocos2d-x3.2之2048——第五篇
...算了，接着发2048吧，这是第五篇了，也非常快了呀，2048系列。立即就要结束了。这篇文章主要讲述：— 查看详情
web前端入坑第五篇：秒懂vuejsangularreact原理和前端发展历史
秒懂Vuejs、Angular、React原理和前端发展历史2017-04-07 小北哥哥 前端你别闹今天来说说“前端发展历史和框架” 「前端程序发展的历史」「不学自知，不问自晓，古今行事，未之有也」我们都知道如今流行的框架：Vue.Js... 查看详情
web前端入坑第五篇：秒懂vuejsangularreact原理和前端发展历史
秒懂Vuejs、Angular、React原理和前端发展历史2017-04-07 小北哥哥 前端你别闹今天来说说“前端发展历史和框架” 「前端程序发展的历史」「不学自知，不问自晓，古今行事，未之有也」我们都知道现在流行的框架：Vue.Js... 查看详情
设计模式从青铜到王者第五篇:创建型模式之简单工厂模式(simplefactorypattern)(代码片段)
系列文章目录文章目录系列文章目录前言一、简单工厂模式模式动机二、简单工厂模式模式定义三、简单工厂模式模式结构四、简单工厂模式时序图五、简单工厂模式代码分析六、简单工厂模式模式分析七、简单工厂模式优点八... 查看详情
前端三系列
阅读目录第一篇:HTML第二篇:CSS第三篇:JavaScript第四篇: jQuery第五篇:Bootstrap持续更新中... 查看详情
深入理解javascript作用域系列第五篇
前面的话 对于执行环境(executioncontext)和作用域(scope)并不容易区分，甚至很多人认为它们就是一回事，只是高程和犀牛书关于作用域的两种不同翻译而已。但实际上，它们并不相同，却相互纠缠在一起。本文先用一张图开宗... 查看详情
web前端第五篇javascript基础
一、JavaScript的历史1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)Netscape(网景)接收Nombas的理念,(BrendanEich)在其NetscapeNavigator2.0产品中开发出一套livescript的脚本语言.... 查看详情
dwr第五篇之文件上传
1. 在第一篇架构基础上进行2. 修改maven依赖1<dependencies>2<dependency>3<groupId>org.directwebremoting</groupId>4 <artifactId>dwr</artifactId>5 <version>3.0.1-RELE 查看详情
构建之法——第五篇
上一周对于需求分析那一模块的内容还存留一点的疑问，经过一周的学习，弄清楚了以下几个方面。 对于软件需求的类型，以及利益相关者，我们根据不同的角度进行了以下的划分，对产品功能性的需求，对产品开... 查看详情
第五篇camunda系列-任务分配(代码片段)
任务分配1.固定分配 在指派用户任务的审批人时。我们是直接指派的固定账号。但是为了保证流程设计审批的灵活性。我们需要各种不同的分配方式，所以这节我们就详细的来介绍先在Camunda中我们可以使用的相关的分配方式... 查看详情
第五篇camunda系列-任务分配(代码片段)
任务分配1.固定分配 在指派用户任务的审批人时。我们是直接指派的固定账号。但是为了保证流程设计审批的灵活性。我们需要各种不同的分配方式，所以这节我们就详细的来介绍先在Camunda中我们可以使用的相关的分配... 查看详情
第五篇camunda系列-任务分配(代码片段)
任务分配1.固定分配 在指派用户任务的审批人时。我们是直接指派的固定账号。但是为了保证流程设计审批的灵活性。我们需要各种不同的分配方式，所以这节我们就详细的来介绍先在Camunda中我们可以使用的相关的分配... 查看详情
深入理解dom事件类型系列第五篇——文本事件
×目录[1]change[2]textInput[3]input[4]propertychange[5]兼容前面的话 如果DOM结构发生变化，触发的是变动事件；如果文本框中的文本发生变化，触发的是文本事件 HTML5为input控件新增了很多type属性，大大增加了input控件的应用场... 查看详情
javaweb详解（第五篇）之el表达式简介(代码片段)
JavaWeb详解（第五篇）之EL表达式简介1、EL表达式概述1.1、什么是EL表达式 EL是JSP表达式语言，全称是ExpressionLanguage（EL）。EL表达式使用"$"表示，用来更方便的读取对象！1.2、为什么要使用EL表达... 查看详情
第五篇：白话tornado源码之褪去模板的外衣
上一篇《白话tornado源码之请求来了》介绍了客户端请求在tornado框架中的生命周期，其本质就是利用epoll和socket来获取并处理请求。在上一篇的内容中，我们只是给客户端返回了简单的字符串，如：“HelloWorld”，而在实际... 查看详情
深入理解脚本化css系列第五篇——动态样式
前面的话 很多时候，DOM操作比较简单明了，因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦。但由于浏览器充斥着隐藏的陷阱和不兼容问题，处理DOM中的某些部分时要复杂一些，比如动态样式就相对较复杂 ... 查看详情