精灵图技术

精灵图技术

why?

1.减少请求次数，提高界面加载速度

what?

图片拼合技术，它就是把多张小图合成一张大图，利用 背景定位属性background-position：xpx ypx 实现显示大图当中的某一个小图

how？

1.确定显示小图片的那个盒子的宽高

2.以背景的方式插入精灵图 background-image：url();

3.移动图片的定位位置 background-position：xpx ypx 向上移动以及向左移动 位置肯定是负值

PS工具

掌握

.psd 源文件 这个文件由多个图层构成

.png .jpeg 成品 一般给客户用 不能修改

工具

移动工具：移动图层

油漆桶：填充颜色

选取工具： 选择图层某一部分

新建图层：面板区点击

变形工具：

​ ctrl+T 快捷键 旋转 缩放 按Enter键完成操作

图层

编组：ctrl+G group

取消班组：ctrl+shift+G

向上移动图层：ctrl+]

向下移动图层：ctrl+[

图层制顶 ctrl+shift+]

图层制底 ctrl+shift+[

图层合并 ctrl+e

前景色 alt+delete

背景色 ctrl +delete